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

其实这个问题最好改成 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 ,这个库非常好用。

然后今天我来看看在 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类似,只能是命令行的方式可视化展示

其他的包

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

猜你喜欢

转载自blog.csdn.net/blueblueskyhua/article/details/120852266