webpack构建体积和构建速度分析统计_webpack2怎么看构建速度-优快云博客

本文链接：https://blog.youkuaiyun.com/liixnhai/article/details/109279243

本文介绍如何使用Webpack内置的stats进行初级分析，通过speed-measure-webpack-plugin进行速度分析，利用webpack-bundle-analyzer来分析构建产物体积，以及如何通过升级Webpack和Node.js版本提升构建效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、stats: 构建的统计信息
学到了：
一、初级分析：webpack 内置的 stats
package.json 中使用 stats
"build:stats": "webpack --config webpack.prod.js --json > stats.json",

二、Node.js 中使用
const webpack = require('webpack');
webpack (config,（err,stats）={
})

三、速度分析：使用 speed-measure-webpack-plugin

可以看到每个 loader 和插件执行耗时

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');

const smp = new SpeedMeasureWebpackPlugin();
const webpackConfig= smp.wrap（{
plugins:[
new Myplugin(),
new MyotherPlugin()
]
}）
速度分析插件作用
分析整个打包总耗时
每个插件和loader的耗时情况
四、webpack-bundle-analyzer 分析体积
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
plugins: [new BundleAnalyzerPlugin()]
构建完成后会在 8888 端口展示大小

可以分析哪些问题？
依赖的第三方模块文件大小
业务里面的组件代码大小
五、使用高版本的 webpack 和 Node.js
构建时间降低了 60%-98%！
六、使用 webpack4：优化原因
V8 带来的优化（for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf）
默认使用更快的 md4 hash 算法
webpacks AST 可以直接从 loader 传递给 AST，减少解析时间
使用字符串方法替代正则表达式