Webpack 打包分析智能体

你要解决什么问题

Webpack 项目随着迭代，打包产物往往变得难以审视：哪些模块占了体积、哪些依赖被重复打包、哪些代码其实可以被 tree-shaking 但因为导入方式不对而保留了下来——这些问题靠肉眼看构建日志基本无解。当 bundle 体积膨胀到一定程度，定位根因会变成一项耗时且低效的排查工作。

它如何工作

该技能围绕两个核心 API 展开：

• webpack-bundle-analyzer：解析打包产物，输出可视化的模块构成数据，让你看清每个模块和依赖在 bundle 中的占比。
• source-map-explorer：进一步深入，利用 source map 定位到源码级别的体积来源，区分是业务代码还是第三方库在占空间。

在此基础上，技能会自动执行两个关键步骤：

1. 识别重复依赖：找出被多个模块重复引入的包，这些是首要的优化目标。
2. 给出 tree-shaking 改写建议：对于因导入方式不规范导致死代码无法被移除的情况，提供具体的 import 改写方案，例如从默认导入切换到具名导入，或调整导入路径以适配包的 sideEffects 配置。

适用边界

• 该技能依赖 Webpack 自身的模块打包能力，适用于以 Webpack 为构建工具的项目，不适用于 Vite、Rollup 等其他构建链的直接分析。
• 上游文档指出，Webpack 支持所有符合 ES5 规范的浏览器（IE8 及以下不支持），这意味着分析结果的优化目标应面向现代浏览器环境。
• 最终的 import 改写仍需开发者在代码中验证，技能提供的是分析结论和建议，而非自动修改源码。