代码分割（Code Splitting）是将应用拆分为多个按需加载的 bundle，以减少首屏负载、提升首包响应性。本文介绍策略、实现模式与常见陷阱。
常见分割策略
- 按路由分割：将页面级代码拆成独立 chunk，使得未访问页面的代码不影响首屏加载。
- 按组件分割：对大型组件或第三方库（如富文本编辑器）进行动态 import。
- 按功能分割：将非关键功能（导出、分析）独立为后台脚本或微前端。
实现要点（以 Vite/webpack 为例）
- 使用
import()动态导入，并为常用异步组件提供 Suspense/占位组件以改善感知体验。 - 对共享依赖设置合理的公共 chunk（vendor）以避免多份重复代码。
性能与体验折衷
- 过度分割会增加网络请求数与 HTTP/2/HTTP3 的开销，合理选择 chunk 划分与长缓存策略（content-hash）是关键。
验证与回归防护
- 在 CI 中加入构建体积与请求数检查；使用 Lighthouse 对首屏加载时间进行回归测试。
相关链接：