report分析vue项目中各文件大小

最新推荐文章于 2023-12-12 00:00:00 发布

小曲曲

最新推荐文章于 2023-12-12 00:00:00 发布

阅读量1.4k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/weixin_43848576/article/details/122668765

版权

140 篇文章 3 订阅

订阅专栏

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。

Vue Cli（@/vue/cli）自带的webpack包体积优化工具，它可以查看各个模块的size大小，方便优化。只需要在build后面加上 --report 参数即可。

1、我们把命令配置到package.json里

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "report": "vue-cli-service build --report"  //加入该行
},

2、执行npm run report 打包并生成report。
注意：网上很多说要先安装webpack-bundle-analyzer包，其实不需要安装。

3、运行 npm run report 后，会在 build 的同时，在dist目录会生成一个report.html，打开后可看到各文件占用大小

关注