代码分割
代码分割：路由级、组件级、功能级拆分，让用户不为暂时用不到的代码付费。
#type / concept
#status / evergreen
#tech / dev / frontend
[!info] related notes
- 所属 MOC: 前端性能优化 MOC
- 前置概念: tree-shaking
- 并列概念: web-first-screen-load-optimization
代码分割
一句话定义
代码分割是将整个 bundle 拆成多个小块，让用户只下载当前页面需要的代码，不必为”暂时用不到的代码”付费。
核心内容
分割维度
路由级拆分
每个页面单独打包，用户访问 A 页不必先下载 B 页的全部代码。
// React Router 懒加载示例
const Home = lazy(() => import('./pages/Home'));
const Detail = lazy(() => import('./pages/Detail'));组件级拆分
重组件、弹窗、编辑器、图表库等按需加载。
功能级拆分
适合延迟加载的功能：
- 富文本编辑器
- 地图
- 3D/可视化
- 报表
- 上传裁剪
- 音视频能力
分割原则
- 首屏相关代码必须优先加载
- 非首屏功能延迟加载
- 公共代码抽取为独立 chunk
- 避免重复依赖
边界与易混淆点
代码分割 vs HTTP/2
HTTP/2 多路复用降低了并发成本，但分割仍有价值：
- 减少首屏加载量
- 利用缓存（公共 chunk 不变）
- 便于按需加载非首屏功能