代码分割通过将大型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，告诉打包工具“这里可以切分”，运行时才发起请求。
例如：
立即学习“Java免费学习笔记（深入）”；
// 不分割：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控制加载时机，防止关键路径被阻塞
