webpack优化篇（四十）：速度分析：使用 speed-measure-webpack-plugin

Posted 2022-08-18 凯小默

说明

玩转webpack学习笔记

使用 speed-measure-webpack-plugin

代码示例：

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin(); 
const webpackConfig = smp.wrap(
	plugins: [
		new MyPlugin(),
		new MyOtherPlugin()
	]
);

可以看到每个 loader 和插件执行耗时，比较耗时的用红色的标记出来

速度分析插件作用

• 分析整个打包总耗时
• 每个插件和 loader 的耗时情况

实战

参考：https://github.com/stephencookdev/speed-measure-webpack-plugin

安装插件

npm install --save-dev speed-measure-webpack-plugin

然后在 webpack.prod.js 添加用法

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();

const webpackConfig = smp.wrap(
 	
);

运行 npm run build，我们可以看到每个插件loader的耗时