JavaScript代码分割通过拆分JS文件为小chunk实现按需加载，提升首屏速度；常用动态import()、React lazy/Suspense、构建工具自动分割及prefetch/preload优化。
JavaScript 代码分割（Code Splitting）是通过将打包后的 JS 文件拆分成多个更小的 chunk，在需要时才加载对应模块，从而减少初始加载体积、提升首屏渲染速度。
动态 import() 实现按需加载
这是最常用也最标准的方式。用 import() 替代静态 import，让 Webpack、Vite 等构建工具自动识别并生成独立 chunk。
- 静态导入会把模块打包进主 bundle：// import Chart from './chart.js'
- 动态导入则延迟加载，只在调用时触发请求：// const Chart = await import('./chart.js')
- 常用于路由组件、模态框、图表库等非首屏必需功能
React 中结合 Suspense 和 lazy 加载组件
适用于函数组件级别的懒加载，配合 React 内置机制实现更顺滑的体验。
- React.lazy() 包裹动态 import，返回一个可渲染的组件
- Suspense 提供 loading 状态兜底，避免白屏或报错
- 示例：const Dashboard = lazy(() => import('./Dashboard')); 配合
>
利用构建工具配置自动分割
无需手动改代码，也能让工具自动提取公共依赖或大体积模块。
立即学习“Java免费学习笔记（深入）”；
- Webpack 的 SplitChunksPlugin 可按重复引用次数、大小阈值、模块类型自动拆包
- Vite 默认启用智能分割，支持 build.rollupOptions.output.manualChunks 手动分组
- 常见策略：把 node_modules 单独打成 vendor.js，或按页面/功能划分 chunks
预获取与预加载优化后续请求
代码分割后，可以进一步用 prefetch 或 preload 提升用户操作后的响应速度。
- import(/* webpackPrefetch: true */ './report.js') —— 空闲时后台加载，适合可能跳转的页面
- import(/* webpackPreload: true */ './critical-utils.js') —— 和父 chunk 并行加载，适合即将用到的资源
- Vite 和 Webpack 都支持类似语法，最终生成 或
基本上就这些。代码分割不复杂但容易忽略，关键是根据用户实际访问路径决定“哪里切”和“怎么载”，而不是盲目拆分。
