📚 课程目录第4章依赖注入优化

4. 依赖分析：使用 Webpack Bundle Analyzer 分析插件依赖、识别冗余依赖与大型依赖

Backstage 插件在构建时，Webpack 会将所有 import 的模块打包成一个或多个 Bundle 文件。如果不对依赖进行可视化分析，很容易出现“打包体积膨胀、冷启动加载缓慢”的问题。本章将使用 Webpack Bundle Analyzer 对插件 Bundle 进行依赖分析，精准定位冗余依赖与大型依赖。

4.1 为什么需要依赖分析

在 Backstage 插件开发中，依赖管理不当会导致以下问题：

问题类型	表现	对冷启动的影响
冗余依赖	多个插件重复打包同一库（如 `lodash`、`moment`）	增加 Bundle 体积，延长首次加载时间
大型依赖	引入了 `@ant-design/icons`、`echarts` 等全量库	单个依赖可能超过 500KB，拖慢首屏渲染
版本冲突	同一依赖存在多个版本，导致打包时重复包含	Bundle 体积膨胀，且可能引发运行时错误
未使用的导出	Tree Shaking 失效，打包了未使用的模块	无意义的体积增加，降低加载效率

核心原则： 在 Backstage 插件冷启动优化中，Bundle 体积每减少 100KB，首屏加载时间平均可缩短 0.3~0.5 秒（基于 3G 网络模拟）。依赖分析是削峰的第一步。

4.2 集成 Webpack Bundle Analyzer

在 Backstage 插件项目中，通过以下步骤快速集成分析工具：

安装依赖：
```
yarn add --dev webpack-bundle-analyzer
```

配置 Webpack 插件： 在插件根目录的 webpack.config.js 中添加：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',      // 生成静态 HTML 报告
      reportFilename: 'bundle-report.html',
      openAnalyzer: false,         // 不自动打开浏览器
      generateStatsFile: true,     // 生成 stats.json 供后续分析
      statsFilename: 'bundle-stats.json',
    }),
  ],
};

运行构建：
```
yarn build
```
构建完成后，在 dist/ 目录下会生成 bundle-report.html 和 bundle-stats.json。
查看报告： 打开 bundle-report.html，即可看到可视化的依赖树状图（Treemap）。

4.3 依赖分析流程与识别方法

使用 Bundle Analyzer 报告，按以下流程识别问题依赖：

  分析流程： 查看 Treemap → 定位大块矩形 → 检查是否为冗余依赖 → 检查是否为大型依赖 → 确认版本冲突 → 制定优化策略。

具体识别方法如下表：

识别目标	在报告中的表现	典型示例
冗余依赖	同一库名出现多次，且大小相近	`lodash` 出现 2 次，分别来自不同版本
大型依赖	单个矩形面积占比超过 10%	`@ant-design/icons` 占 15% 的 Bundle 体积
未 Tree Shaking	库的完整代码被包含，而非仅使用的部分	`date-fns` 全量导入而非按需导入
重复打包	同一依赖在多个 Chunk 中出现	`react-router` 同时出现在主 Chunk 和插件 Chunk

4.4 依赖分析可视化结构

下图展示了使用 Webpack Bundle Analyzer 分析一个典型 Backstage 插件后的依赖分布结构：

4.5 识别后的优化策略

根据分析结果，针对不同类型的问题依赖，采取以下优化措施：

大型依赖（如 @ant-design/icons）：
- 使用按需加载：import { HomeOutlined } from '@ant-design/icons' 替代全量导入。
- 考虑替换为更轻量的图标库（如 react-icons）。
冗余依赖（如 lodash 多版本）：
- 在 package.json 中使用 resolutions 或 overrides 统一版本。
- 使用 yarn deduplicate 命令去重。
未 Tree Shaking 的依赖：
- 检查 sideEffects 配置，确保 Webpack 能正确移除未使用代码。
- 使用 import { specificFunction } from 'library' 替代 import library。
重复打包的公共依赖：
- 在 Backstage 根目录的 webpack.config.js 中配置 splitChunks，将公共依赖提取到单独 Chunk。

注意： 在 Backstage 插件中，不要随意将依赖标记为 external，因为插件运行在 Backstage 主应用环境中，部分依赖需要由主应用提供。建议先通过 Bundle Analyzer 确认依赖来源，再决定优化方案。

4.6 实战案例：优化前后对比

以下是一个 Backstage 插件在依赖分析前后的实际数据对比：

指标	优化前	优化后	降幅
Bundle 总大小	1.2 MB	680 KB	43%
大型依赖数量	3 个（>200 KB）	1 个	67%
冗余依赖数量	5 个	0 个	100%
冷启动加载时间（3G）	4.2 秒	2.5 秒	40%

通过 Webpack Bundle Analyzer 的可视化分析，团队能够快速定位问题依赖，并制定针对性的优化策略，从而显著降低插件 Bundle 体积，实现冷启动削峰。