代码分割策略包括入口级分割、公共代码提取、动态导入和预加载。入口级适用于多页面应用，SplitChunks提取公共模块减少重复，动态import实现按需加载，结合preload/prefetch优化资源加载时机，提升首屏速度与用户体验。
在现代前端开发中，JavaScript 打包优化直接影响应用的加载性能和用户体验。代码分割（Code Splitting）是 Webpack、Vite 等构建工具提供的核心优化手段之一，它将代码拆分为更小的块，实现按需加载。不同的代码分割策略适用于不同场景，合理选择能显著提升首屏加载速度和资源利用率。
1. 入口级代码分割（Entry Points Splitting）
这是最基础的代码分割方式，通过配置多个入口文件，让打包工具自动生成对应的 bundle。
适合多页面应用（MPA），每个页面拥有独立的 JS 文件，避免共享代码重复打包。
- 配置简单，只需在 webpack.config.js 中定义多个 entry
- 容易导致公共模块重复，除非配合 SplitChunksPlugin 提取共用代码
- 不利于单页应用（SPA）的细粒度控制
2. 公共代码提取（CommonsChunk / SplitChunks）
利用 Webpack 的 SplitChunksPlugin 自动识别并提取多个 chunk 间的公共模块。
立即学习“Java免费学习笔记（深入）”；
有效减少重复代码，提升浏览器缓存效率。
- 可配置缓存组（cacheGroups），按模块类型或体积进行拆分
- 建议将第三方库（如 React、Lodash）单独打包，利用长效缓存
- 过度拆分可能导致请求数过多，影响加载性能
3. 动态导入代码分割（Dynamic Import）
通过 import() 语法实现按需加载，是目前最灵活且推荐的方式。
特别适用于路由级分割和大功能模块延迟加载。
- 结合 React.lazy 或 Vue 的异步组件，实现路由懒加载
- 非路由场景也可用于加载重型工具库（如 PDF 预览、图表渲染）
- 生成的 chunk 可命名（magic comments），便于调试和预加载
4. 预加载与预连接策略（Preload / Prefetch）
在动态导入基础上，使用 webpack 的 magic comments 控制加载时机。
提升关键路径资源的获取优先级。
- /* webpackPreload: true */：预加载，高优先级，立即下载
- /* webpackPrefetch: true */：空闲时预取，低优先级，改善后续体验
- 滥用 preload 可能抢占首屏资源，需谨慎使用
基本上就这些。选择哪种策略取决于应用结构和用户行为模式。多数项目应结合使用：SplitChunks 提取公共库，动态 import 拆分路由，再辅以预取优化流转体验。合理配置下，既能减少首包体积，又能保证流畅交互。
