通过 speed-measure-webpack-plugin 插件包裹 webpack 配置对象，可精准统计各 loader 和 plugin 的构建耗时；需用 smp.wrap() 包裹整个配置而非加入 plugins 数组，运行 build 后终端显示详细性能数据，便于定位 babel-loader 等耗时超 1 秒的瓶颈。
直接在 Webpack 配置中引入并包裹整个配置对象，就能看到每个 Loader 和 Plugin 的详细耗时。
安装插件
运行以下命令安装：
- npm install speed-measure-webpack-plugin --save-dev
- 或用 yarn：yarn add speed-measure-webpack-plugin -D
配置方式（以 webpack.config.js 为例）
注意：不能像普通插件那样加到 plugins 数组里，必须用 smp.wrap() 包裹整个 Webpack 配置对象。
- 导入插件并实例化：
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin(); - 导出时用
smp.wrap()包裹原始配置：
module.exports = smp.wrap({
entry: './src/index.js',
module: { /* ... */ },
plugins: [/* 其他插件 */]
});
Vue CLI 项目（vue.config.js）的写法
如果使用 Vue CLI，需在 configureWebpack 中包裹：
- const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
module.exports = {
configureWebpack: smp.wrap({
// 原来的 webpack 配置，如 plugins、module.rules 等
})
};
查看结果
执行打包命令（如 npm run build）后，终端会输出类似结构：
- SMP ⏱ Loaders
- babel-loader took 4.21 secs (×1287 modules)
- css-loader + postcss-loader + sass-loader took 1.89 secs
- SMP ⏱ Plugins
- HtmlWebpackPlugin took 0.33 secs
重点关注耗时超过 1 秒的 Loader，比如 babel-loader 或预处理器链，它们通常是优化突破口。
