说明

玩转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 和插件执行耗时，比较耗时的用红色的标记出来

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

速度分析插件作用

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

实战

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

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

安装插件

npm install

webpack优化篇（四十）：速度分析：使用 speed-measure-webpack-plugin_代码示例_03

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

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

const smp = new SpeedMeasurePlugin();

const webpackConfig = smp.wrap({
  
});

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


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

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