vue/cli3.x打包分析工具

webpack4.x

• webpack-bundle-analyzer
  自动计算出各个模块在项目工程中的依赖与分布情况，npm run build之后会自动 打开分析页面

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
configureWebpack: {
    plugins: [ new BundleAnalyzerPlugin()]
}

同类型的还有 webpack-chart 以及 webpack-analyse

• speed-measure-webpack-plugin
  它分析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让我们对打包时间较长的部分进行针对性优化

npm install -D speed-measure-webpack-plugin

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
const smp = new SpeedMeasurePlugin();
 
module.exports = smp.wrap({
  // 项目中的plugins和loader
  plugins: [
    // ...
  ],
  module: {
    // ...
  }
});