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

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

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

然后就打开第一个 issues。

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

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

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

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

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

各种工具的下载量

rollup-plugin-visualizer

Star: 570

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

rollup-plugin-analyzer

Star: 168

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

rollup-analyzer

Star:17

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

rollup-plugin-sizes

Star:67

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

其他的包

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