> For AI agents: the complete documentation index is available at https://rsdoctor.rs/zh/llms.txt, the full documentation bundle is available at https://rsdoctor.rs/zh/llms-full.txt. # 产物分析 :::info 如果想要分析某个 Module 的引用链路，可以查看 👉🏻[Module 引用链分析](https://rsdoctor.rs/zh/guide/usage/module-analysis.md)。 ::: ## ⭐️ 功能概览 **Rsdoctor** 提供 `Bundle Size` 模块，用于分析构建产物的**资源大小**、**重复包**和**模块引用关系**： - **产物概览**：展示产物总数、各类型文件数目、大小以及占比，以及重复包和重复包的引用链，👉🏻 [**产物概览**](#-%E4%BA%A7%E7%89%A9%E6%A6%82%E8%A7%88) - **产物分析（`Bundle Analysis`）模块**：分析构建产物资源（**Assets**）以及所包含的 **Modules** 的大小和代码信息。在该模块中，可以查看 Assets 中 **Module 打包后的实际代码大小**、模块的原始代码、**打包后的代码段**以及**模块引用关系**。 其中，**产物分析**展示了两种视图模式，**Tree Map** 和 **Tree Graph**： - 👉🏻 [**Tree Map**](https://rsdoctor.rs/zh/guide/usage/bundle-size.md#-tree-map) Tree Map 是一种经典的构建产物分析视图，能帮助开发者更直观地可视化并分析 bundle 的构成，以及资源（Assets）和模块（Modules）的占比。同时支持搜索模块资源，点击模块资源可以放大到该模块区域。 ![](https://assets.rspack.rs/others/assets/rsdoctor/treemap-intro.gif) - 👉🏻 [**Tree Graph**](https://rsdoctor.rs/zh/guide/usage/bundle-size.md#-tree-graph) Tree Graph 是一种**基于文件树形式**的构建产物分析视图，能帮助开发者更直观地可视化并分析产物的构成，以及产物（Assets）和模块（Modules）的占比。同时支持搜索模块资源，点击模块还可以查看模块详情和代码。 ![](https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png) ## 🪐 名词解释 - **`Assets`**：资源是最终存在于输出文件夹内的文件，包括 JavaScript、CSS、图像、字体、媒体等文件类型。每个 Chunk 都有对应的 [Assets 资源](https://rspack.rs/misc/glossary#asset)。 - **`Module`**：多个 Module 组合成了 Chunk。有关 Module 类型的详细信息，请参阅 [Rspack Modules](https://rspack.rs/misc/glossary#module-type)。 - **`Source Size`**：文件的原始大小，未经过任何转换和压缩。 - **`Bundle Size`**：文件最终输出的大小。如果开启了压缩，这个值代表压缩后的大小。 - **`Gzip Size`**：文件经过 gzip 压缩后的大小。 - **`Package Count`**：第三方包的数量。 - **`Initial Chunk`**: **initial(初始化)** 是入口起点的主 Chunk，该 Chunk 包含入口起点指定的所有模块及其依赖项，与「**按需加载**」的 **Chunk** 资源不同。 - 有关 Initial Chunk 的详细信息，请参阅 [Initial Chunk 介绍](https://rspack.rs/misc/glossary#initial-chunk)。 - **`Duplicate Packages`**: 打包到项目中的重复的第三方包。不包括未打包进产物的第三方包，请参阅[重复第三方包](https://rsdoctor.rs/zh/guide/usage/bundle-alerts.md)。 - **`Concatenated Module`**: 串联模块是将多个模块在打包时提升或串联到一个闭包中。将每个模块封装在单独的函数中会增加浏览器中的运行时开销。可以通过开启 [`optimization.concatenateModules`](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6) 参数来进行优化。 ## 🪐 产物概览 ### 产物信息卡 产物概览显示了 `Total Files` 等文件数目和大小信息。点击卡片可以展开资源详情，如下图所示： ![](https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall-1.png) - 点击详情图标，右侧会展示对应的资源树，并标明资源大小： ![](https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-tree.png) - 点击标签切换资源信息查看，例如：**「Total JS | Initial JS」**。同时，卡片上展示了资源的体积占比、体积大小以及资源数目。同样，点击右下图标可以展开资源列表。 ### 重复第三方包 - **Duplicate Packages** 卡片上展示了项目中重复的第三方包数量。点击图片可以查看重复第三方包的具体详情。请注意，这里的第三方包是被打包的第三方包。 更多信息，请参阅[重复第三方包](https://rsdoctor.rs/zh/guide/usage/bundle-alerts.md) ## 🪐 Tree map :::info 如果缺少模块体积或代码，请参考 [FAQ](https://rsdoctor.rs/zh/guide/more/faq.md#%E4%BA%A7%E7%89%A9%E5%88%86%E6%9E%90%E4%B8%ADmodule-%E9%83%BD%E6%B2%A1%E6%9C%89-bundledparsed-size-%E6%80%8E%E4%B9%88%E5%8A%9E) 中的排查步骤。 ::: Tree Map 视图可以直观展示各个模块之间的占比和关系，如下图所示。点击模块资源可以放大到该模块区域。 ![](https://assets.rspack.rs/others/assets/rsdoctor/treemap-intro.gif) - Tree Map 视图也支持搜索模块资源，左侧的侧边栏可以过滤资源（Assets）和搜索模块（Modules）。点击模块的搜索结果可以放大到该模块区域。 ![](https://assets.rspack.rs/others/assets/rsdoctor/treemap-all.png) - 双击某个区块可以展示其 Module 详情卡片，如下图所示。更多信息请参阅 [Module 详情](https://rsdoctor.rs/zh/guide/usage/module-analysis.md)。 ![](https://assets.rspack.rs/others/assets/rsdoctor/treemap-dbclick.png) ## 🪐 Tree graph :::info 如果缺少模块体积或代码，请参考 [FAQ](https://rsdoctor.rs/zh/guide/more/faq.md#%E4%BA%A7%E7%89%A9%E5%88%86%E6%9E%90%E4%B8%ADmodule-%E9%83%BD%E6%B2%A1%E6%9C%89-bundledparsed-size-%E6%80%8E%E4%B9%88%E5%8A%9E) 中的排查步骤。 ::: Tree Graph 是一种**基于文件树形式**的构建产物分析视图，用于分析构建产物资源（**Assets**）以及所包含的 **Modules** 的大小和代码信息。在该模块中，可以查看 Assets 中 **Module 打包后的实际代码大小**、模块的原始代码、**打包后的代码段**以及**模块引用关系**。 ![](https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png) 点击导航栏的「Bundle Size」选项，即可查看 Bundle 分析报告。请注意，要展示此页面，需要开启构建产物分析能力 [features](https://rsdoctor.rs/zh/config/options/options.md)。 ### 资源与模块关系展示 **Bundle Analysis** 模块用于分析构建产物资源（**Assets**）以及所包含的 **Modules** 的大小和代码信息。示例图如下： - 左侧是 **Assets** 资源列表，按照资源大小降序排列，可以点击 **「expand all」** 按钮展开全部节点。 - 右侧是 **Assets** 对应的 **Modules** 列表，同样按照打包后模块大小降序排列。 ![](https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-analysis-tree.png) ### 搜索筛选框 顶部工具栏从左到右依次是：搜索 `Assets` 工具、筛选 `Assets` 大小工具、筛选 `Module` 大小工具。 - **搜索 Entry 输入框**：在输入框中输入 **Entry** 的关键词，可以搜索对应的 **Entry**，只展示该 **Entry** 下的 **Assets** 等。 - **搜索 Assets 输入框**：在输入框中输入 `Assets` 的关键词，可以搜索对应的 `Assets`。 - **Assets Size 筛选工具**：填写数字，单位为：KB、MB，可以过滤掉小于所填 `Size` 的 `Assets` 资源。 - **Module Size 筛选工具**：填写数字，单位为：KB、MB，可以过滤掉小于所填 `Size` 的 `Module` 资源。 ![](https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-analysis-selects.png) ### 模块搜索功能 支持模块搜索功能，用户可以通过点击「**Search Module**」按钮，打开模块搜索弹窗。输入模块名称来快速定位和查看模块所在的 Assets，从而更方便地分析模块的引用关系和大小。 如下图，可以看到匹配搜索 Module 关键字的结果： ![](https://assets.rspack.rs/others/assets/rsdoctor/search-modules.png) ### 模块标签说明 **Assets** 标签如左图所示，从左到右依次代表：**资源体积**、**[Initial Chunk](https://rspack.rs/misc/glossary#initial-chunk)** 和 **代码查看**。 ![](https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-assets-tags.png)![](https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-modules-tags.png) **Modules** 标签如右图所示，从左到右依次代表： - **Bundled Size** - 模块打包进产物的最终大小。一些标有 `concatenated` 的模块是串联模块，对此值有一定影响，请参阅下方的 `concatenated module` 解释。 - **[Concatenated Module](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6)** 串联模块：将多个模块在打包时提升或串联到一个闭包中。有两种类型： - 一种是串联主模块，标明串联了多少个 `Modules`； - 另一种是被串联的子模块，标明其所属的串联模块。 - **Module Explorer** 标签：点击可打开 `Module` 之间的依赖关系分析页面。 - **代码查看** 标签，点击可展开代码段，包括 `Source`（源码）、`Transformed`（编译后代码）和 `Bundled`（打包后代码）。 ### 支持 concatenated module 分析 **[串联模块](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6)** 会将多个模块合并到同一个闭包中。这些模块可能来自不同的包。对于[关闭 chunk splitting](https://rsbuild.rs/config/split-chunks#disable-chunk-splitting) 的项目，这类分析尤其重要。 Rsdoctor 可以计算每个子模块经过 Tree Shaking 后的实际打包体积，帮助你了解各模块对最终产物体积的贡献、评估模块串联的影响，并优化分包策略。 Rsdoctor 2.x 会自动启用 Rspack 的原生分析插件，收集所需的 source map 数据。 串联模块分析不支持 `eval` 或 `eval-*` 类型的 `devtool` 配置，请改用 `source-map` 等非 eval 配置。 > 下图对比了同一产物在支持串联模块分析前后的报告。 - 支持前：无法显示子模块体积 ![](https://assets.rspack.rs/others/assets/rsdoctor/all-in-one-before.png) - 支持后：可以显示子模块体积 ![](https://assets.rspack.rs/others/assets/rsdoctor/all-in-one-after.png) ## 🪐 Module 详情 点击模块标签，可以查看模块详情，如下图所示： ![](https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif) - **Reasons**：顾名思义是 \[原因] 的意思，即某个 Module 存在的原因。Reasons 就是该 Module 被哪些 Module 引入，而整个 Reasons Tree 就是这个 Module 的整个上游引用链，包括直接父级和间接父级。即 Rspack 的 stats.reasons。 - **Dependencies**：是该 Module 依赖了哪些 Module。 - **Bailout Reason**：Tree shaking 时，该 Module Tree shaking 失败的原因。 > 更多可查看详情：[Module 详情](https://rsdoctor.rs/zh/guide/usage/module-analysis.md)