Webpack Speed Measure

优化的第一步，是知道瓶颈在哪里。

在针对 Webpack 编译速度优化的过程中，知道哪些 loader / plugin 运行耗费了很多时间就显得非常重要了。

Speed Measure Plugin 是一款针对 Webpack 的插件，只需要一些非常简单的操作，插件就可以在已有配置的基础上，给 Webpack 的打包过程增加必要的计时功能，同时清晰的列举出各个 loader / plugin 在本次编译中的耗时情况。Plugin 的文档在这里。

简单来说，只需要在原有的配置基础上，这么额外包一层 Speed Measure Plugin 就可以了：

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin({ disable: false });

const config = { /* ... */ };

module.exports = smp.wrap(config);

这里，disable: false 表示需要 Speed Measure Plugin 记录时间，这也是默认的值，可以不传。如果赋值是 true，那么就会告知 Speed Measure Plugin 不要做任何处理，结果等同于没有使用 Speed Measure Plugin。如果需要经常对 Webpack 的打包进行优化，可以将 Speed Measure Plugin 的代码写入到库中，并通过环境变量等方法在打包的时候开启或关闭这个记录的功能。