标准答案
- 代码分割的目标是减少首屏必须下载和执行的 JavaScript，把低频代码延后加载。
- 路由懒加载适合页面级拆分，例如后台不同菜单页、设置页、报表页。
- 组件懒加载适合体积大、首屏不需要、交互后才出现的组件，例如编辑器、图表、地图、弹窗内容。
- 拆分过细会带来过多请求、加载闪烁和缓存碎片，不是 chunk 越多越好。
- 懒加载要配合 loading、错误处理、预加载策略和性能监控。
题目解析
代码分割的目标不是把文件切得越碎越好，而是让首屏少下载、少解析、少执行暂时用不到的代码。拆包收益要看用户路径和模块体积。
路由懒加载适合天然页面边界，用户没进入某个页面前不需要加载它。组件懒加载更适合富文本编辑器、图表、地图、复杂弹窗这类低频重依赖。
拆得过细会引入请求瀑布和 loading 碎片。一个合理方案通常还会配合预加载、错误兜底、骨架屏和 bundle 分析，而不是只写几个 dynamic import。
代码示例
动态 import 是常见的代码分割入口。
JavaScript
const ChartPanel = () => import('./ChartPanel')
button.addEventListener('click', async () => {
const { openEditor } = await import('./rich-editor')
openEditor()
})常见误区
- 把所有组件都懒加载，导致页面到处出现加载等待。
- 只拆包不处理加载失败，网络异常时用户无反馈。
- 拆分后没有复查首屏 JS、请求瀑布和交互耗时。