Vite 打包分析：如何找出项目中最大的 JS 文件？

做前端性能优化时，很多人都会犯一个错误：

还没找到问题，就开始疯狂优化。

例如：

开启 Gzip
配置 CDN
图片压缩
删除代码
修改打包配置

最后折腾了半天，页面速度却几乎没有变化。

为什么？

因为：

你根本不知道真正影响性能的是谁。

就像医生看病一样。

不能一上来就开药。

而是应该：

身体不舒服

↓

检查

↓

找到病因

↓

针对治疗

前端性能优化也是一样。

在优化之前，我们首先需要知道：

到底是谁，把我们的 JavaScript 包变得这么大？

今天介绍的 rollup-plugin-visualizer，就是专门干这件事情的。

一、为什么要分析打包体积？

假设现在有一个 Vue3 项目。

执行：

npm run build

得到：

dist

↓

app.js

3.8 MB

很多人第一反应就是：

3.8MB 太大了。

但是：

真正的问题来了。

是谁导致：

3.8 MB

变大的？

是：

Element Plus？

还是：

ECharts？

还是：

highlight.js？

又或者：

自己的业务代码？

如果不知道。

那么：

后面的优化：

基本就是：

瞎猜。

二、为什么不要凭感觉优化？

举个例子。

你觉得：

Element Plus

一定很大。

于是：

花了一下午：

按需导入。

结果：

JS：

3.8 MB

↓

3.7 MB

几乎没有变化。

后来：

打开分析报告才发现：

真正最大的：

ECharts

1.6 MB

而：

Element Plus：

其实只有：

200 KB

这时候：

你会发现：

前面的优化：

基本白做了。

所以：

不要凭经验优化。

而是：

先分析，再优化。

三、rollup-plugin-visualizer 是什么？

rollup-plugin-visualizer 是一个 Vite / Rollup 插件。

它不会优化你的项目。

它做的事情只有一件：

生成一份打包分析报告。

例如：

项目打包完成以后：

npm run build

插件会自动生成：

stats.html

打开以后：

你会看到：

整个项目：

每一个依赖：

占用了多少空间。

例如：

Vue

Element Plus

ECharts

highlight.js

axios

dayjs

都会清楚显示出来。

四、如何安装？

安装非常简单。

执行：

npm install --save-dev rollup-plugin-visualizer

然后：

修改：

vite.config.js

导入插件：

import { visualizer } from "rollup-plugin-visualizer";

然后：

放到：

plugins

最后：

plugins: [

    vue(),

    visualizer()

]

建议：

放到：

最后一个插件。

这样：

打包结束以后：

自动生成分析报告。

五、如何生成分析报告？

和平时打包一样：

执行：

npm run build

打包结束以后。

项目根目录：

会出现：

stats.html

双击打开。

浏览器就会看到：

一个可视化页面。

六、怎么看分析报告？

第一次打开：

很多同学都会懵。

页面里面：

密密麻麻。

不知道看什么。

其实：

重点只有一个：

面积最大的。

例如：

┌────────────────────┐

 ECharts

└────────────────────┘

占了：

整个页面：

一大块。

说明：

它就是：

最大的依赖。

再比如：

highlight.js

也占了一块。

说明：

它同样比较大。

而：

axios

可能：

只有：

一点点。

那么：

axios：

基本不用考虑优化。

所以：

分析报告：

看的不是：

数量。

而是：

面积。

面积越大。

说明：

占用越大。

七、哪些库通常比较大？

不同项目：

不一样。

但是：

Vue 项目里面：

比较常见的：

有：

ECharts

因为：

它内置了：

很多：

图表能力。

例如：

折线图
饼图
地图
雷达图
仪表盘

自然：

体积也会比较大。

还有：

Element Plus

如果：

完整引入：

体积：

通常：

也不会太小。

因此：

官方一直推荐：

按需导入。

另外：

highlight.js

因为：

内置了：

很多：

语言支持。

如果：

全部打包：

体积：

同样比较明显。

除此之外：

还有：

moment

monaco-editor

pdf.js

three.js

这些：

都是：

出了名的：

大体积依赖。

八、找到以后怎么优化？

很多同学：

看到：

ECharts

1.5 MB

第一反应：

就是：

删掉。

其实：

不是。

应该：

根据：

依赖特点：

决定：

优化方案。

例如：

Element Plus：

九、为什么很多优化没有效果？

举个例子。

项目：

4 MB

其中：

ECharts

2 MB

但是：

你却一直：

优化：

axios

最终：

4 MB

↓

3.98 MB

几乎：

没有任何区别。

所以：

性能优化：

最大的原则：

就是：

先找到最大的瓶颈。

而不是：

看到什么。

优化什么。

十、分析报告还能看什么？

除了：

模块大小。

还能看到：

依赖关系。

例如：

A

↓

B

↓

C

你会发现：

有些库：

其实：

并不是：

自己安装的。

而是：

某个插件：

自动依赖进来的。

这时候：

如果：

替换掉：

那个插件。

整个：

依赖：

都可能：

一起消失。

所以：

分析报告：

不仅能：

看大小。

还能：

帮助我们：

了解：

项目依赖结构。

十一、什么时候需要使用？

其实：

任何：

准备上线的：

Vue 项目。

都建议：

至少：

分析一次。

尤其：

下面这些项目：

后台管理系统
企业官网
博客系统
数据可视化平台
电商后台

如果：

项目：

越来越大。

每次：

打包：

越来越慢。

那么：

第一步：

就应该：

打开：

分析报告。

看看：

是谁：

越来越大。

十二、总结

性能优化：

不是：

凭感觉。

也不是：

把网上所有优化方案：

全部配置一遍。

真正正确的流程：

应该是：

打包

↓

分析

↓

找到最大的依赖

↓

针对性优化

↓

再次分析

↓

继续优化

rollup-plugin-visualizer 最大的价值：

不是：

帮你优化。

而是：

告诉你：

到底是谁，把你的项目撑大了。

只有找到真正的瓶颈。

后面的：

按需导入、

CDN、

代码拆分、

懒加载、

Gzip、

预压缩……

这些优化。

才真正有意义。

下一篇文章，我们将继续介绍：

什么是 CDN？为什么越来越多的前端项目，都喜欢把静态资源放到 CDN 上？