17370845950

代码分割通过将大型JS文件拆分为按需加载的chunk来减少初始加载体积，实现路由级、组件级分割及第三方库抽离，结合动态import()触发，提升并行加载与缓存效率。

JavaScript 代码分割（Code Splitting）是指将一个大型 JavaScript 文件拆分成多个较小的、按需加载的块（chunks），而不是一次性把全部代码打包进一个 bundle 中。它本身不是语法特性，而是构建工具（如 Webpack、Vite、Rollup）支持的一种优化策略，配合动态 import() 等机制实现。

代码分割如何减少初始加载体积

单页应用（SPA）如果把所有逻辑、路由、组件、工具库都打包进 main.js，用户首次访问时就得下载几 MB 的 JS 文件，造成白屏时间长、交互延迟。代码分割能确保：首屏只加载当前需要的代码，其余模块延后或按需拉取。

• 路由级分割：不同页面/视图各自独立 chunk，访问 /login 时只加载登录相关代码
• 组件级分割：用 React.lazy + import() 延迟加载非首屏组件（如模态框、图表模块）
• 第三方库单独抽离：通过 splitChunks 把 React、Lodash 等稳定依赖提取为 vendors.js，利用浏览器长期缓存

动态 import() 是代码分割的触发开关

静态 import 语句会在构建时被分析并提前打包；而动态 import() 返回 Promise，告诉打包工具“这里可以切分”，运行时才发起请求。

例如：

// 不分割：Login 组件和所有依赖都会打进主包
import Login from './Login';

// 分割：Login 及其依赖（含可能的子组件、样式、图标等）生成独立 chunk
const Login = await import('./Login').then(module => module.default);

Webpack 会自动为该 import() 创建新 chunk，并在运行时通过 JSONP 或 HTTP 请求加载。

代码分割提升加载速度的核心原因

关键不在于“文件变小了”，而在于更精细的资源调度：

• 降低主包体积：首屏 JS 可能从 1.2MB 缩减到 280KB，缩短下载与解析时间
• 启用并行加载：浏览器可同时请求多个小 chunk，比单个大文件更充分利用带宽
• 缓存利用率更高：业务代码常变动，但框架/工具库相对稳定；分离后，用户更新页面时只需重新下载业务 chunk
• 支持预加载与占位：结合 React.Suspense 或 loading 状态，提供更可控的用户体验

注意：代码分割不是越多越好

过度切分会增加 HTTP 请求数，在 HTTP/1.x 环境下反而拖慢速度；现代 HTTP/2 支持多路复用，影响减弱，但仍需权衡。

• 避免将仅 1–2KB 的模块单独拆分（打包开销可能超过收益）
• 慎用“每个按钮点击都 import 一个组件”，应按功能域或路由边界合理划分
• 配合 prefetch 或 preload 控制加载时机，防止关键路径被阻塞