其实这个问题最好改成 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