近期在优化项目时发现构建特别慢,故希望可以通过一些工具来统计一下,我们项目基于vue-cli创建,我这边就直接在此基础上进行介绍
生成stats.json文件
$ webpack --profile --config build/webpack.dev.conf.js --json > stats.json
复制代码
以上会在项目根目录输出dev构建时的明细,stats.json文件中字段time为编译时间,单位毫秒(ms)
浏览器打开并上传stats.json
$ curl http://webpack.github.io/analyse/#assets
复制代码
上传成功后会到home主页面,大致包括如下:
- webpack及当前版本
- 打包编译总时长
- hash
- modules
- chunks
- assets
- warnings/errors
Webpack Chart可以详细的看到各个模块的依赖包及依赖包的大小等信息。
$ curl http://alexkuz.github.io/webpack-chart/
复制代码
如有侵权,请发邮箱至wk_daxiangmubu@163.com 或留言,本人会在第一时间与您联系,谢谢!!
长按二维码关注我们,了解最新前端资讯