编辑“︁Next.js代码分割”︁

= Next.js代码分割 =

== 介绍 ==  
'''代码分割'''（Code Splitting）是 Next.js 性能优化的核心策略之一，它通过将应用程序拆分为更小的代码块（chunks），按需加载而非一次性加载整个应用，从而减少初始加载时间、提升用户体验。Next.js 默认支持代码分割，并提供了多种优化方式，包括动态导入（Dynamic Imports）、基于路由的分割（Route-based Splitting）和组件级分割（Component-level Splitting）。

代码分割的核心优势包括：
* '''减少初始加载体积'''：仅加载当前页面所需的代码。
* '''并行加载'''：浏览器可以同时下载多个小文件。
* '''缓存友好'''：修改单个模块时只需重新加载对应 chunk。

== 工作原理 ==  
Next.js 使用 Webpack 的代码分割功能，结合其路由系统自动分割页面。当用户访问某个路由时，仅加载该路由对应的 JavaScript 文件。以下是其流程示意图：

<mermaid>
graph LR
    A[应用程序入口] --> B[主包 main.js]
    A --> C[页面路由 /home]
    A --> D[页面路由 /about]
    B -->|加载运行时| E[浏览器]
    C -->|按需加载| E
    D -->|按需加载| E
</mermaid>

== 实现方式 ==  

=== 1. 动态导入（Dynamic Imports） ===  
Next.js 支持 ES2020 的 <code>dynamic import()</code> 语法，允许延迟加载模块。以下是一个组件级分割的示例：

<syntaxhighlight lang="javascript">
// 静态导入（常规方式）
// import HeavyComponent from '../components/HeavyComponent'

// 动态导入（代码分割）
import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>Loading...</p>, // 可选加载状态
  ssr: false // 是否启用服务端渲染
})

function HomePage() {
  return (
    <div>
      <h1>Welcome</h1>
      <HeavyComponent /> {/* 仅在需要时加载 */}
    </div>
  )
}
</syntaxhighlight>

'''输出效果'''：
* 初始 HTML 中不包含 <code>HeavyComponent</code> 的代码。
* 当组件渲染时，浏览器会发起网络请求获取对应的 chunk。

=== 2. 路由级自动分割 ===  
Next.js 的文件系统路由会自动生成分割点。例如：
* <code>pages/index.js</code> → 对应 <code>/</code> 路由
* <code>pages/about.js</code> → 对应 <code>/about</code> 路由

每个路由文件会被编译为独立的 JavaScript 包。

=== 3. 预加载（Prefetching） ===  
Next.js 的 <code>Link</code> 组件支持预加载路由代码：
<syntaxhighlight lang="javascript">
import Link from 'next/link'

// 鼠标悬停时预加载/about的代码
<Link href="/about" prefetch={true}>
  <a>About Us</a>
</Link>
</syntaxhighlight>

== 高级配置 ==  

=== 自定义 Webpack 分割 ===  
在 <code>next.config.js</code> 中可以自定义分割策略：
<syntaxhighlight lang="javascript">
module.exports = {
  webpack(config) {
    config.optimization.splitChunks = {
      chunks: 'all',
      maxSize: 244 * 1024, // 拆分为最大244KB的chunk
    }
    return config
  }
}
</syntaxhighlight>

=== 分析工具 ===  
使用 <code>@next/bundle-analyzer</code> 可视化代码分割效果：
<syntaxhighlight lang="bash">
npm install @next/bundle-analyzer
</syntaxhighlight>

配置 <code>next.config.js</code>：
<syntaxhighlight lang="javascript">
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
})
module.exports = withBundleAnalyzer({})
</syntaxhighlight>

运行后生成报告：
<syntaxhighlight lang="bash">
ANALYZE=true npm run build
</syntaxhighlight>

== 实际案例 ==  

'''场景'''：电商网站的产品详情页包含一个复杂的 3D 产品查看器（Three.js 实现），该组件仅在 10% 的访问中使用。

'''优化方案'''：
1. 使用动态导入延迟加载 3D 查看器组件
2. 当用户点击"查看 3D 模型"按钮时加载组件
3. 添加加载状态提升用户体验

<syntaxhighlight lang="javascript">
const ProductViewer3D = dynamic(
  () => import('../components/ProductViewer3D'),
  { 
    loading: () => <Spinner />,
    ssr: false 
  }
)

function ProductPage() {
  const [show3DViewer, setShow3DViewer] = useState(false)

  return (
    <div>
      <button onClick={() => setShow3DViewer(true)}>
        查看3D模型
      </button>
      {show3DViewer && <ProductViewer3D />}
    </div>
  )
}
</syntaxhighlight>

'''效果对比'''：
* 优化前：初始包大小增加 1.2MB（包含 Three.js）
* 优化后：初始包减少 1.2MB，仅当用户需要时加载

== 数学原理 ==  
代码分割的效益可以用资源加载模型表示。设：
* 总应用体积为 <math>V</math>
* 分割为 <math>n</math> 个 chunk，每个体积为 <math>V_i</math>（<math>\sum_{i=1}^n V_i = V</math>）
* 初始加载体积为 <math>V_{\text{initial}} = V_1</math>

则网络利用率提升比为：
<math>
\eta = \frac{V - V_{\text{initial}}}{V} \times 100\%
</math>

== 最佳实践 ==  
1. '''关键路径优先'''：确保首屏内容快速加载
2. '''合理拆分粒度'''：避免产生过多小文件（建议 chunk 大小 50-300KB）
3. '''预加载重要路由'''：对高概率访问的页面使用 <code>prefetch</code>
4. '''监控分割效果'''：使用 Lighthouse 审计加载性能

== 常见问题 ==  

'''Q：代码分割会导致额外的网络请求吗？'''  
A：是的，但现代 HTTP/2 服务器能高效处理多个并发请求，总体效益通常为正。

'''Q：如何防止"加载闪烁"？'''  
A：为动态组件添加 <code>loading</code> 占位符，或使用骨架屏（Skeleton Screens）。

'''Q：服务端渲染(SSR)如何兼容？'''  
A：设置 <code>ssr: false</code> 的组件将在客户端才渲染，避免 SSR 报错。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js SEO与性能优化]]