这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战
介绍
我们在构建webpack的时候总会等很长时间，很多时候不知道处理到哪个loader或者插件用了多久的执行耗时了，对那些优化也不知道从哪里下手，本期就介绍一款webpack速度测量插件——speed-measure-webpack-plugin，它可以看到每个loader和插件的执行耗时，这样就让你知道优化你的webpack构建速度你的注意力该集中在哪里。
安装
# NPM
npm install --save-dev speed-measure-webpack-plugin
# YARN
yarn add -D speed-measure-webpack-plugin
使用
// webpack.config.js
const speedMeasurePlugin = require("speed-measure-webpack-plugin")
const smp = new speedMeasurePlugin({
disable:false, // 默认值：false，表示该插件是否禁用
outputFormat:"human", // 默认值：human，表示为格式打印其测量值，可选human/json/humanVerbose,或者是Function
outputTarget:console.log, // 默认值：console.log，表示输出到的文件的路径或者是调用输出
pluginNames:{ // 重新定义某个插件的名称
myFavicons:faviconsWebpackPlugin
}
})
这里就实例化了这个插件，并且写了4个最常用的配置项，这里着重说一下outputFormat和pluginNames。
outputFormat是打印出的格式：
- human：可读的文字排列。
- json：输出JSON数据。
- humanVerbose：详细的可读文本，speedMeasurePlugin里其他参数跟他相互作用。
- Function：你可传递一个函数其接收的为JSON数据让你来处理自由返回。
pluginNames中可以自定义很多名称，来更改其他插件实例，构建输出时方便你去辨认，这里我们做了个实验就是会把实例faviconsWebpackPlugin改名为myFavicons，后面测试一下是否奏效。
接下来，我们要让smp包裹webpack里的配置内容。
// webpack.config.js
const webpackConfig = {
// ...
module: {
rules: [
// ...loader
],
},
plugins = [
// ...
],
stats:"none"
}
module.exports = smp.wrap({
...webpackConfig
})
为了看的清楚我们把stats设置为none，这样webpack的一些输出就不展示了。
然后执行构建打包，我们就会发现多了输出了这些：
可以发现刚才的faviconsWebpackPlugin确实改名成myFavicons了，最关键的是，他们每个插件和loader的执行耗时都一目了然。
兼容
通过speed-measure-webpack-plugin包里的信息可以看到，他的兼容性非常的棒，webpack1到5都可以兼容到，但前提是你的node版本必须是6以上。
结语
总的来说，speed-measure-webpack-plugin可以非常方便灵活的看出每个插件和loader执行耗时，对你项目的优化大有裨益，因为你知道从哪下手了，你也可以根据不同项目去调整输出格式，从而降低颗粒度使人更易读，甚至你可以给他改造扩展的让它输出更美观。
