Webpack Bundle Analyzer 是最常用直观的包体积分析工具，通过交互式 treemap 可视化打包结果，快速定位大体积模块；需安装后在 plugins 中配置 BundleAnalyzerPlugin 并启用 openAnalyzer 和 server 模式。

Webpack Bundle Analyzer 是 Webpack 生态中最常用、最直观的包体积分析工具，它能将打包结果可视化为交互式 treemap（树状图），帮你快速定位哪些模块或依赖占用了最多空间。

安装与基础配置

在项目中安装：

• 运行 npm install --save-dev webpack-bundle-analyzer 或 yarn add -D webpack-bundle-analyzer
• 在 Webpack 配置的 plugins 中添加插件（开发环境推荐）：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      openAnalyzer: true, // 打包后自动打开分析页面
      analyzerMode: 'server', // 启动本地服务，默认端口 8888
    })
  ]

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

看懂 treemap 图的关键点

主界面是一个彩色嵌套矩形图，面积大小 ≈ 模块体积，颜色深浅通常表示嵌套层级：

• 顶部大块通常是 node_modules，点击可下钻查看具体三方库（如 lodash、moment、axios）
• 同色相邻小块可能是同一库的不同引入路径（比如 lodash/debounce vs lodash 全量）
• 右上角显示当前选中模块的完整路径和 gzip 后体积（更贴近真实加载成本）
• 左上角可切换视图模式：stat（原始体积）、parsed（JS 解析后体积）、gzip（压缩后体积）——推荐优先看 gzip

结合优化的典型场景

发现体积问题后，可针对性优化：

• 三方库过大：检查是否误引全量包（如 import moment from 'moment' → 改为 import moment from 'moment/moment' 或换 dayjs）
• 重复依赖：treemap 中出现多个相同包不同版本，可通过 resolutions（Yarn）或 overrides（npm v8.3+）统一版本
• 图片/字体等静态资源未压缩：对应模块体积异常高，需检查 url-loader/file-loader 配置或升级为 assets modules
• 未启用代码分割：整个应用打包成一个 chunk，可配置 splitChunks 拆分 vendor 和异步模块

">

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南