webpack4 优化耗时分析speed-measure-webpack-plugin插件

最新推荐文章于 2025-05-30 16:32:33 发布

原创

最新推荐文章于 2025-05-30 16:32:33 发布 · 1.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

本文介绍了如何使用speed-measure-webpack-plugin插件来测量和优化webpack配置中的下载、loader和plugin耗时，通过颜色提示监控过长执行时间。实例展示了配置过程和关键代码片段，帮助开发者提升构建效率。

能够列出输出、loader和plugins的耗时,过长将会使用黄色和红色显示
1、下载
	cnpm install -D speed-measure-webpack-plugin
	
2、使用
	const SpeedMeasurePlugin=require('speed-measure-webpack-plugin')
	
	const smp = new SpeedMeasurePlugin();
	smp.wrap({配置config})

效果图:
在这里插入图片描述
代码示例:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
   
    CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLInlineCSSWebpackPlugin = require ( "html-inline-css-webpack-plugin" ). default ;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const glob = require('glob');
const fs = require('fs');
const TerserPlugin = require("terser-webpack-plugin");
const SpeedMeasurePlugin=require('speed-measure-webpack-plugin')

const smp = new SpeedMeasurePlugin()