Vite 打包体积分析，性能提升不再困扰

超、凢脫俗 2022-09-16 12:20 334阅读 0赞

其实这个问题最好改成 rollup 打包体积分析，但是为什么我会取这个名字呢？其实这主要是由于我的习惯性引起的，因为太久没用一个东西，如果遇到问题，肯定会去围绕它自身去进行搜索。

例如遇到 vite 打包分析相关问题，就会在 google 搜索，vite build analyzer

![image-20211018190429528][]

然后就打开第一个 issues。

![image-20211018190521888][]

然后才反应过来，哦，怎么把 vite 是用 rollup 打包给忘记了呢。这也许会被有些读者嘲讽，“Vite 用 rollup 打包，这都不会？”，但是对于这部分户读者，我想提个问题，高中的三角函数还记得吗？例如 sin(15°) 的值是什么，这个快捷算法你还记得吗？

因此我想了想，还是以 vite 作为关键词去取这个标题，就像是你用 antd 组件库，日期选择器出问题了，你肯定不会往 moment 这个仓库提问题，首先想到的肯定是往 antd 去提问题~

大家都知道 webpack 中有 `webpack-bundle-analyzer` ，这个库非常好用。

![a5e617fc3c2d51122765397843801e39.gif][]

然后今天我来看看在 rollup 中，该用什么去分析打包体积呢？

我搜索了下，一共有以下的打包分析工具

![image-20211018191354246][]

各种工具的下载量

![image-20211018191441284][]

## rollup-plugin-visualizer ##

**Star: 570**

和 `webpack-bundle-analyzer` 比较相似，可视化并分析 Rollup 打包后的文件，以查看哪些模块占用了空间。

![pic][]

## rollup-plugin-analyzer ##

**Star: 168**

可以看到各个包的占比，但是可视化较差，只能在终端查看。

![image-20211019184112247][]

## rollup-analyzer ##

**Star:17**

和`rollup-plugin-analyzer`类似，但是这个包已经不维护了。

![image-20211019184546181][]

## rollup-plugin-sizes ##

**Star:67**

也和 `rollup-plugin-analyzer`类似，只能是命令行的方式可视化展示

![c6233c8853acf7f862e01005570813b2.png][]

## 其他的包 ##

rollup-analyzer-plugin、rollup-plugin-size-snapshot、

## 总结 ##

`rollup-plugin-visualizer`的可视化程度是最好的。

## 参考 ##

https://www.npmjs.com/package/webpack-bundle-analyzer

https://www.npmtrends.com/rollup-analyzer-vs-rollup-analyzer-plugin-vs-rollup-plugin-analyzer-vs-rollup-plugin-size-snapshot-vs-rollup-plugin-sizes-vs-rollup-plugin-visualizer

https://github.com/vitejs/vite/issues/898

[image-20211018190429528]: /images/20220828/851404c52d0b46bab699d7411fc01277.png
[image-20211018190521888]: /images/20220828/99f5c45a0edf4c7ea4478b590b63dd11.png
[a5e617fc3c2d51122765397843801e39.gif]: /images/20220828/372a53b0fdb44e2f832e9a916a1fae9c.png
[image-20211018191354246]: /images/20220828/7f4f575188524b96a35a3c76795d04c5.png
[image-20211018191441284]: /images/20220828/59c8d781cb5542b49b76968a8c0bb4e0.png
[pic]: /images/20220828/270ef20b3f524021813ee790ddb56d2e.png
[image-20211019184112247]: /images/20220828/7e06c2c62c6f4efeb477573f3e00329e.png
[image-20211019184546181]: /images/20220828/e0f4c8e4455c419c9097fb18089d721c.png
[c6233c8853acf7f862e01005570813b2.png]: /images/20220828/e19d08de062943ffa92789fba097a421.png