一、webpackbar:以进度条的形式实时显示打包或运行时的进度。使用方法如下:
(1)先下载:npm install webpackbar -D
(2)在vue.config.js中配置即可:
// vue.config.js
const WebpackBar = require('webpackbar')
module.exports = {
plugins: [
...
new WebpackBar()
]
}
二、speed-measure-webpack-plugin:查看每个loader和plugin的耗时情况。
三、webpack-bundle-analyzer:可视化的方式让我们直观地看到打包的bundle中到底包含哪些模块内容,以及每一个模块的体积大小。
参考网址:一文搞定webpack构建优化策略