Vue 项目里的代码分割：Webpack 真正帮你省下了什么
单页应用最容易被忽略的一个问题，就是“什么都先打进来”。
页面少的时候感觉不到，模块一多，首屏体积和初始化时间就会慢慢拉高。用户明明只访问了首页，却被迫把后台设置页、表单向导、图表模块一起下载了。
这就是代码分割存在的理由。
代码分割不是高级优化
很多人第一次接触 Webpack 的代码分割，会把它当成“后面再说的优化项”。可对 Vue 这种页面越来越多的单页应用来说，它其实很早就值得考虑。
因为只要页面结构明确、访问路径分层，自然就会想到：
- 首页不该加载后台页代码
- 列表页不该提前加载编辑器
- 低频弹窗没必要跟首屏一起进来
Vue 路由懒加载就是最常见的切入点
在 Vue 项目里，代码分割最直接的入口通常就是路由级拆分。
1const UserList = () => import('./views/UserList.vue');
这行代码带来的不只是“写法更现代”，而是明确告诉打包器：这部分代码可以等真正访问时再加载。
Webpack 帮你做的，不只是拆文件
如果没有打包器，你很难优雅地把应用切成多个按需加载的模块。
Webpack 在这里做的是：
- 找出依赖关系
- 生成独立 chunk
- 在运行时按需拉取
你写起来只是一行动态导入，真正复杂的事情都在背后。
别为了拆而拆
代码分割当然有好处，但也不是 chunk 越多越好。
拆得太碎，可能带来：
- 请求数变多
- 资源管理复杂
- 公共依赖重复加载判断更难
所以最自然的拆分单位通常还是页面、重模块和低频功能，而不是所有组件都切成一个单独 chunk。
写在最后
Webpack 的代码分割真正省下来的，不只是几百 KB 体积，而是用户第一次进入页面时不必要的等待。
Vue 应用做大之后，按需加载几乎不是“可选项”，而是结构设计的一部分。你越早理解这一点，后面的性能成本越低。