Vue 项目包太大时先别慌：Webpack Bundle Analyzer 到底能帮你看清什么
Vue 项目包一大，最容易出现的情况就是大家开始凭感觉优化。
有人觉得是图片大，有人怀疑某个 UI 库太重，也有人想先改构建参数。问题是，在没有看到真实体积分布之前，很多判断都只是猜。
这时最值得做的第一步，不是马上删代码，而是先把包看清楚。
Bundle Analyzer 的价值不在图炫
很多人第一次看到打包分析图，会被那一堆彩色方块吸引。但真正重要的不是图好不好看，而是它让你知道体积到底花在了哪里。
例如：
- 哪个第三方库最重
- 哪些模块重复出现
- 哪个页面 chunk 明显偏大
这些问题如果不先搞清楚，后面的优化很容易瞎忙。
Vue 项目里最常见的膨胀点
实际项目里包体积变大，常见原因通常包括：
- 引了过重的组件库
- 路由没有按需拆分
- 富文本或图表类库直接进了主包
- 工具库按整个包引入
这类问题很多并不是代码写错，而是结构没有控制住。
写在最后
Webpack Bundle Analyzer 最大的作用，是把“感觉有点大”变成“我知道大在哪里”。
前端优化最怕靠直觉。先把体积分布看清楚，再决定删什么、拆什么、延后加载什么，效率会高很多。