Bundle 分析与代码分割

pnpm add -D @next/bundle-analyzer

// next.config.ts
import type { NextConfig } from 'next'
import bundleAnalyzer from '@next/bundle-analyzer'
 
const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
})
 
const nextConfig: NextConfig = {
  // 你的其他配置...
}
 
export default withBundleAnalyzer(nextConfig)

# 运行分析
ANALYZE=true pnpm build

// ❌ 常见陷阱：在客户端代码中引入了服务端的大型库
'use client'
import { format } from 'date-fns'  // +70KB gzip（可能不需要这么大的库）
 
// ✅ 替代方案 1：用原生 Intl API（0KB）
const formatted = new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
}).format(date)
 
// ✅ 替代方案 2：用轻量库 dayjs（2KB gzip）
import dayjs from 'dayjs'
dayjs(date).format('YYYY-MM-DD')

// ✅ ES Module — 可以 Tree Shaking
import { clsx } from 'clsx'  // 只打包 clsx 函数
 
// ❌ CommonJS — 无法 Tree Shaking
const clsx = require('clsx')  // 打包整个模块

{
  "main": "./dist/index.cjs",     // CommonJS（Node.js 用）
  "module": "./dist/index.mjs",   // ES Module（打包工具用）
  "sideEffects": false             // 关键！告诉打包工具：这个库没有副作用，未使用的导出可以安全移除
}

// lib/utils/index.ts — barrel file（桶文件）
export { formatDate } from './date'
export { formatCurrency } from './currency'
export { generatePDF } from './pdf'  // 这个很大（引入了 pdfkit）
 
// 如果你只用 formatDate，理论上应该只打包 date.ts
// 但如果 Tree Shaking 不完美，可能把 pdf.ts 也拖进来
 
// ✅ 安全做法：直接从具体文件导入
import { formatDate } from '@/lib/utils/date'

// package.json
{
  "sideEffects": [
    "*.css",           // CSS 文件有副作用（需要被加载）
    "./src/polyfills.ts"  // polyfill 有副作用
  ]
}

import dynamic from 'next/dynamic'
 
// 基础：懒加载组件
const HeavyChart = dynamic(() => import('@/components/heavy-chart'), {
  loading: () => <div className="h-[400px] animate-pulse bg-gray-100 rounded-lg" />,
})
 
// 禁用 SSR：某些组件只能在浏览器中运行（依赖 window、DOM API）
const CodeEditor = dynamic(() => import('@/components/code-editor'), {
  ssr: false,
  loading: () => <div className="h-[600px] bg-gray-900 rounded-lg" />,
})
 
// 在页面中使用 — 滚动到视口时或条件渲染时才加载
export default function DashboardPage() {
  const [showChart, setShowChart] = useState(false)
 
  return (
    <div>
      <h1>Dashboard</h1>
      <button onClick={() => setShowChart(true)}>显示图表</button>
      {showChart && <HeavyChart data={chartData} />}  {/* 点击后才加载 */}
      <CodeEditor />  {/* 滚动到这里时加载（SSR 阶段显示 loading） */}
    </div>
  )
}

// 如果组件不是 default export
const MarkdownRenderer = dynamic(
  () => import('@/components/markdown').then((mod) => mod.MarkdownRenderer),
)

'use client'
 
import { useRef, useEffect, useState } from 'react'
import dynamic from 'next/dynamic'
 
const HeavyComponent = dynamic(() => import('@/components/heavy-component'))
 
export function LazySection() {
  const ref = useRef<HTMLDivElement>(null)
  const [isVisible, setIsVisible] = useState(false)
 
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
          observer.disconnect()  // 加载后不再观察
        }
      },
      { rootMargin: '200px' },  // 提前 200px 开始加载
    )
 
    if (ref.current) observer.observe(ref.current)
    return () => observer.disconnect()
  }, [])
 
  return (
    <div ref={ref} className="min-h-[400px]">
      {isVisible ? <HeavyComponent /> : <div className="animate-pulse bg-gray-100 h-[400px] rounded-lg" />}
    </div>
  )
}

// app/dashboard/page.tsx — Server Component
// 这些 import 的库完全不会出现在 client bundle 中！
import { db } from '@/lib/db'
import { formatReport } from '@/lib/report-utils'
import { marked } from 'marked'
 
export default async function DashboardPage() {
  const data = await db.query.reports.findMany()
  const summary = formatReport(data)  // 服务端计算，零 client JS
  const html = marked(summary)         // marked 库只在服务端运行
 
  return (
    <div>
      <h1>Dashboard</h1>
      <div dangerouslySetInnerHTML={{ __html: html }} />
      <InteractiveChart data={data} />  {/* 只有这个 Client Component 会发送 JS */}
    </div>
  )
}

// next.config.ts
const nextConfig: NextConfig = {
  // 优化第三方库的打包
  experimental: {
    optimizePackageImports: [
      'lucide-react',      // 图标库：只打包用到的图标
      '@radix-ui/react-icons',
      'date-fns',          // 日期库：只打包用到的函数
      'lodash-es',         // 工具库：只打包用到的函数
      'recharts',          // 图表库
    ],
  },
}

# 检查是否有同一个库的多个版本
pnpm ls --depth 3 | grep react
# 如果看到 [email protected] 和 [email protected] 同时存在，说明有版本冲突
 
# 用 pnpm 的 dedupe 命令去重
pnpm dedupe

// scripts/check-bundle-size.mts
import { readdir, stat } from 'fs/promises'
import { join } from 'path'
 
const BUDGET = {
  'page.js': 100 * 1024,         // 单个页面 JS < 100KB
  'layout.js': 50 * 1024,        // 布局 JS < 50KB
  'total-first-load': 200 * 1024, // 首屏总 JS < 200KB
}
 
async function checkBundleSize() {
  const chunksDir = '.next/static/chunks'
  const files = await readdir(chunksDir)
 
  let totalSize = 0
  const violations: string[] = []
 
  for (const file of files) {
    if (!file.endsWith('.js')) continue
    const fileStat = await stat(join(chunksDir, file))
    totalSize += fileStat.size
 
    // 检查单文件大小
    if (fileStat.size > 150 * 1024) {
      violations.push(`⚠️ ${file}: ${(fileStat.size / 1024).toFixed(0)}KB (超过 150KB)`)
    }
  }
 
  console.log(`\n📦 Total client JS: ${(totalSize / 1024).toFixed(0)}KB`)
 
  if (violations.length > 0) {
    console.log('\n❌ Bundle size violations:')
    violations.forEach((v) => console.log(v))
    process.exit(1)
  }
 
  console.log('✅ Bundle size within budget')
}
 
checkBundleSize()