frontend-performance

前端性能优化

诊断并修复 Next.js 应用中的性能问题。

快速诊断

运行 Lighthouse CLI

# Performance audit (headless)
npx lighthouse http://localhost:3000 --output=json --output-path=./lighthouse.json --chrome-flags="--headless" --only-categories=performance

# Parse key metrics
cat lighthouse.json | jq '{
  score: .categories.performance.score,
  FCP: .audits["first-contentful-paint"].displayValue,
  LCP: .audits["largest-contentful-paint"].displayValue,
  TBT: .audits["total-blocking-time"].displayValue,
  CLS: .audits["cumulative-layout-shift"].displayValue
}'

# Find slow scripts
cat lighthouse.json | jq '.audits["bootup-time"].details.items | .[0:8]'

# Main thread breakdown
cat lighthouse.json | jq '.audits["mainthread-work-breakdown"].details.items'

重要：始终测试生产构建（next build && next start），而不是开发模式。开发模式会因 HMR、源映射和未启用优化而产生 2-10 倍的额外开销。

Bundle 分析

# Install
bun add -d @next/bundle-analyzer

# Run analysis
ANALYZE=true bun run build

在 next.config.js 中配置：

import bundleAnalyzer from '@next/bundle-analyzer'

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
})

export default withBundleAnalyzer(nextConfig)

常见修复方法

1. optimizePackageImports

适用于导出项较多的库（图标、工具函数、动画库）：

// next.config.js
const nextConfig = {
  experimental: {
    optimizePackageImports: [
      'framer-motion',
      'lucide-react',
      '@phosphor-icons/react',
      'lodash',
      'date-fns',
      '@heroicons/react',
    ],
  },
}

这可确保摇树优化正常工作——打包时只包含你使用的导入项。

2. Framer Motion——Variants 模式

错误做法——会创建 N 个动画控制器：

// Each element has its own animation state - expensive!
{items.map((item, i) => (
  <motion.div
    key={i}
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ delay: i * 0.05 }}  // Individual delays
  >
    {item}
  </motion.div>
))}

正确做法——使用 staggerChildren 的单个控制器：

// Parent controls all children - efficient!
const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.05,
    },
  },
}

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { type: 'spring' as const, damping: 15 }
  },
}

<motion.div
  variants={containerVariants}
  initial="hidden"
  animate="visible"
>
  {items.map((item, i) => (
    <motion.div key={i} variants={itemVariants}>
      {item}
    </motion.div>
  ))}
</motion.div>

还应避免：

• 在动画中使用 filter: blur()——开销非常大
• 使用过多的无限循环动画（减少数量或改用 CSS）
• 使用 variants 时，在子元素上单独设置 transition 属性

3. 将繁重计算移至服务端

避免将以下内容打包到客户端：

• 语法高亮：在服务端使用 shiki，而不是 prism-react-renderer
• Markdown 解析：在服务端渲染
• 日期格式化库：考虑使用 Intl.DateTimeFormat
• 大型数据转换：使用 API 路由或服务端组件

4. 图片优化

// Always use next/image
import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority  // For LCP images
  placeholder="blur"  // Reduces CLS
/>

5. 字体优化

// app/layout.tsx
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',  // Prevents FOIT
  preload: true,
})

6. 外部包（仅服务端）

避免将仅供服务端使用的包打包：

// next.config.js
const nextConfig = {
  serverExternalPackages: ['sharp', 'canvas'],
}

性能目标

指标	良好	需要改进	较差
LCP	≤2.5s	2.5-4s	>4s
FCP	≤1.8s	1.8-3s	>3s
TBT	≤200ms	200-600ms	>600ms
CLS	≤0.1	0.1-0.25	>0.25

调试工作流

1. 运行生产环境 Lighthouse——获取基准指标
2. 检查 bootup-time 审计——找出运行缓慢的脚本
3. 运行 bundle analyzer——识别体积较大的代码块
4. 优先修复影响最大的问题——通常 1-2 个包会导致大部分问题
5. 重新测试——验证改进效果

快速改进清单

• 测试生产构建，而非开发模式
• 为图标/工具函数库添加 optimizePackageImports
• 使用 Framer Motion variants 模式
• 从动画中移除 filter: blur()
• 为 LCP 图片添加 priority
• 使用 next/font 并设置 display: swap
• 将繁重的库移至服务端组件