Webpack 中分析打包体积最常用方式是使用 webpack-bundle-analyzer 插件，它通过交互式树状图和扇形图直观展示模块体积，支持 server 或 static 模式，可定位大依赖、重复引入、未摇树代码及大资源文件，并可结合 stats 和 source-map-explorer 深度分析。
在 Webpack 中分析打包体积并生成可视化报告，最常用且高效的方式是使用 webpack-bundle-analyzer 插件。它能将打包后的模块以交互式、树状图和扇形图形式直观展示，帮你快速定位体积过大或冗余的依赖。
安装并配置 webpack-bundle-analyzer
先安装插件（开发依赖）：
npm install --save-dev webpack-bundle-analyzer
然后在 Webpack 配置中（通常是 webpack.config.js 或 vue.config.js 等）添加插件：
- 如果是直接使用 Webpack 配置，在
plugins数组中引入：
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
<p>module.exports = {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'server', // 启动本地服务查看报告
openAnalyzer: true, // 自动打开浏览器
// analyzerHost: '127.0.0.1',
// analyzerPort: 8888,
}),
],
};- 如果用的是 Vue CLI（
vue.config.js），可这样配置：
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
<p>module.exports = {
configureWebpack: {
plugins: [
process.env.NODE_ENV === 'production' &&
new BundleAnalyzerPlugin({
analyzerMode: 'static', // 生成静态 HTML 文件（适合 CI/CD）
openAnalyzer: false,
reportFilename: 'report.html',
}),
].filter(Boolean),
},
};运行构建并查看报告
执行构建命令后，插件会自动启动一个本地服务（默认 http://127.0.0.1:8888）或生成 HTML 报告文件：
立即学习“Java免费学习笔记（深入）”；
- 开发时：运行
npm run build（或对应命令），浏览器会自动打开可视化界面 - CI/CD 场景：设为
analyzerMode: 'static'，会在输出目录生成report.html，可直接用浏览器打开 - 支持三种视图切换：Module（按模块）、Stat（按 webpack 统计数据）、Parsed（解析后大小，含 gzip 估算）
关键分析技巧和常见优化方向
报告页面中重点关注以下几类问题：
-
体积异常大的第三方库：比如未按需引入的
lodash或完整版moment，可改用lodash-es或dayjs -
重复引入的模块：多个包依赖同一版本不同路径的库（如
node_modules/a/node_modules/react），可通过resolve.alias或externals统一 -
未 Tree-shaking 的代码：检查是否启用了
mode: 'production'和optimization.usedExports: true，确保 ES6 模块语法被正确识别 -
大图片或字体文件：查看
assets列表，考虑压缩、转 base64 临界值调整，或使用 CDN
配合其他工具提升分析深度
单独用 Bundle Analyzer 有时不够，可组合以下方式：
- 启用 Webpack 内置统计：构建时加
--stats=verbose，输出详细模块信息到终端 - 使用
source-map-explorer分析 source map（适合调试压缩后代码的实际来源）：
npx source-map-explorer dist/js/*.js
- 在 package.json 中添加快捷脚本：
"scripts": {
"build:analyze": "npm run build -- --report"
}某些脚手架（如 Create React App）已内置该能力，运行 npm run build -- --stats 即可生成 stats.json，再用 Analyzer 加载分析。
