webpack构建分析工具

一、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构建优化策略