使用 source-map-explorer 分析 tree shaking 效果，核心做法是生成包含详细映射信息的 source map，然后将其与构建产物一起输入工具进行可视化对比。具体而言，在 webpack 配置中开启 `devtool: 'source-map'` 以确保生成完整的 `.map` 文件，接着运行构建命令，最后执行 `npx source-map-explorer build/static/js/main.js build/static/js/main.js.map` 即可在浏览器中查看哪些代码被实际引用、哪些被 tree shaking 剔除。
如何配置 Webpack 以生成适合分析的 Source Map
要获得准确的 Tree Shaking 分析结果，必须确保构建过程生成了标准的 Source Map 文件。在 Webpack 4 或 5 中，只需将 `devtool` 选项设置为 `'source-map'`，这样会在输出目录中生成对应的 `.map` 文件。需要注意的是，如果使用生产环境优化插件（如 TerserPlugin），需确保其配置允许保留足够的调试信息，通常默认配置即可满足 source-map-explorer 的需求。此步骤是后续分析的基础，没有正确的映射文件，工具无法将压缩后的代码还原为原始模块结构。
{
"entry": "./src/index.js",
"output": {
"path": "__dirname + '/dist'",
"filename": "bundle.js"
},
"mode": "production",
"devtool": "source-map",
"optimization": {
"usedExports": true,
"minimize": true
}
}
上述配置片段展示了关键设置。`devtool: 'source-map'` 强制生成完整源地图。`optimization.usedExports` 标记了未使用的导出，配合 `minimize` 阶段由 Terser 执行实际的移除操作。构建完成后，`dist` 目录下会同时存在 `bundle.js` 和 `bundle.js.map`，这就是 source-map-explorer 所需的两个输入参数。
如何使用命令行工具执行分析并解读结果
安装好 `source-map-explorer` 后，通过命令行直接指向生成的 JS 文件和对应的 Map 文件即可启动分析。命令格式为 `source-map-explorer
npx source-map-explorer dist/bundle.js dist/bundle.js.map
运行该命令后，终端会显示解析进度，随后弹出浏览器窗口。在窗口中，你可以点击具体的模块节点展开查看详情。例如，若发现 `lodash` 占据了 50KB 且未被有效拆分，说明 Tree Shaking 未生效或配置有误。此时应检查是否使用了 CommonJS 语法而非 ES Modules，因为 source-map-explorer 依赖静态分析，ESM 结构更利于工具识别未使用的导出。通过这种可视化的反馈，可以直观地验证 Tree Shaking 策略的有效性，并指导后续的代码重构。
当模块被标记为 unused 但未从最终包中移除时该如何排查
在分析过程中，可能会遇到 source-map-explorer 显示某些模块为“unused”，但最终构建产物中依然包含其代码的情况。这通常是因为 Tree Shaking 的作用域限制或模块系统的兼容性导致的。Webpack 的 Tree Shaking 仅对 ES Modules 有效，如果代码中混用了 CommonJS (`require`) 或 AMD，Webpack 会保守地认为这些模块可能有副作用，从而跳过剔除。此外，如果模块导出的函数被动态调用或通过字符串引用，静态分析无法确定其被使用，也会保留代码。排查时，应检查源码中是否存在非 ESM 的导入语句，或者尝试使用 `sideEffects: false` 字段明确告知打包器该模块无副作用。在 source-map-explorer 的视图中，如果看到大量此类模块堆积，优先将它们转换为 ES Modules 格式，这是解决此类问题的最直接手段。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
