2. 编译速度分析

优化 webpack 构建速度，首先需要知道是哪些插件、哪些 loader 耗时长，方便我们针对性的优化。

通过 speed-measure-webpack-plugin 插件进行构建速度分析，可以看到各个 loader、plugin 的构建时长，后续可针对耗时 loader、plugin 进行优化。

安装：

npm i -D speed-measure-webpack-plugin

webpack-dev.js 配置

// 引入插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 实例化
const smp = new SpeedMeasurePlugin();
// 使用 smp.wrap()
module.exports = smp.wrap({
  // ...webpack config...
})

效果：