提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

2023-03-14 22:59:16 时间

说明

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

image.png



速度分析插件作用


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


实战


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

d61176164fb6445484f1338b29056995.png



安装插件

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


e71c430770064353a1e5556ecba50a30.png

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

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

const smp = new SpeedMeasurePlugin();

const webpackConfig = smp.wrap({
    
});

b7d339bdb45d4a7a9670a1a86450e46d.png


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

3a15c658499245479fe5dcabfb4e8fdd.png






相关文章