记录一种简单的Vue项目打包文件分析方式

598

正式开始之前,有必要说明下,这篇文章(实际上都不算是文章,我就是记录下)有点水,但又没那么水。。。

问题起源

最近,我打算把我的项目优化下,就是看下打包之后的文件大小这种

发展

印象中,执行一个命令就可以了,但我有点记不清了,于是我就在网上搜了下,真是不搜不知道啊,网上全是让先安装 npm i webpack-bundle-analyzer --save-dev,然后再在vue.config.js中增加一段配置,最后再自定义一个npm命令。一来,我印象中应该没这么麻烦,二来,我实在是懒得搞的这么麻烦。

结果

本着这么麻烦宁可不优化了的心态,我决定再找找看,在我快要屈服的情况下,终于在vue-cli的官网中找到了答案.....

image.png

换句话说,现在之前的三步,现在只要一步,自定义一个npm命令即可

"report": "vue-cli-service build --report"

以上,从中我得出一个结论,工具类的问题还是先从官方文档中找靠谱

PS: vue-cli的这个功能也是基于 webpack-bundle-analyzer

image.png