vue-cli利用webpack-bundle-analyzer分析构建产物

webpack-bundle-analyzer 分析报告

大家都看过这种 webpack 分析报告吧,是由插件 webpack-bundle-analyzer 生成,用来在论文、ppt 或者博客里炫耀是最好用不过了。

当然它的主要功能还是帮助我们分析 webpack 打包之后的结果,观察各个静态资源的大小。

bundle-report

好消息是 vue-cli 官方已经集成了这个插件功能。

可是第一次使用 npm run build --report 却发现并没有生成 report.html;

傻眼。。。

vue-cli 中使用

网上搜索一下,都是让在 vue.config.js 里 require webpack-bundle-analyzer, 然后 configureWebpack 里增加 plugins。

改完 vue.config.js 后,运行 npm run build 就能自动打开一个网页,运行在 8888 端口,显示 webpack 分析报告。

可是之前就是这样用啊,vue-cli 官网说已经支持了,不可能还需要我们自己手动修改 vue.config.js 吧?这个功能实现很简单,不可能留给我们提 pr 的机会吧。。。

找到 cli-service 的执行代码,

看这个情况是明显是已经支持了,不需要手动改 vue.config.js。

那问题出在哪里呢。加点 log 看一下,args 的 report 根本是 false 啊。

再仔细一看,npm 根本就没有把 --report 这个选项传下去。

换用 yarn 试一下:

人家 yarn 可以啊,npm 为什么不行?

不可能吧,这个全球工具不会给我留 pr 机会吧。。。

正确使用姿势

扒一扒官方文档,


npm 对不起,是我不够了解你 。再来一次:

这才是正确的姿势。查看 dist 目录下,已经有了 report.html。

(还是觉得这个用法有点不符合习惯。)

当然除了用 yarn build --report, 也可以在 package.json 里面增加 scripts. 只要姿势对,repoort.html 就会出现。

个人blog

  • 9
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值