#产物分析

#⭐️ 功能概览

Rsdoctor 提供 Bundle Size 模块，用于分析构建产物的资源大小、重复包和模块引用关系：

• 产物概览：展示产物总数、各类型文件数目、大小以及占比，以及重复包和重复包的引用链，👉🏻 产物概览
• 产物分析（Bundle Analysis）模块：分析构建产物资源（Assets）以及所包含的 Modules 的大小和代码信息。在该模块中，可以查看 Assets 中 Module 打包后的实际代码大小、模块的原始代码、打包后的代码段以及模块引用关系。

其中，产物分析展示了两种视图模式，Tree Map 和 Tree Graph：

• 👉🏻 Tree Map

Tree Map 是一种经典的构建产物分析视图，能帮助开发者更直观地可视化并分析 bundle 的构成，以及资源（Assets）和模块（Modules）的占比。同时支持搜索模块资源，点击模块资源可以放大到该模块区域。

• 👉🏻 Tree Graph

Tree Graph 是一种基于文件树形式的构建产物分析视图，能帮助开发者更直观地可视化并分析产物的构成，以及产物（Assets）和模块（Modules）的占比。同时支持搜索模块资源，点击模块还可以查看模块详情和代码。

#🪐 名词解释

• Assets：资源是最终存在于输出文件夹内的文件，包括 JavaScript、CSS、图像、字体、媒体等文件类型。每个 Chunk 都有对应的 Assets 资源。
• Module：多个 Module 组合成了 Chunk。有关 Module 类型的详细信息，请参阅 Rspack Modules。
• Source Size：文件的原始大小，未经过任何转换和压缩。
• Bundle Size：文件最终输出的大小。如果开启了压缩，这个值代表压缩后的大小。
• Gzip Size：文件经过 gzip 压缩后的大小。
• Package Count：第三方包的数量。
• Initial Chunk: initial(初始化) 是入口起点的主 Chunk，该 Chunk 包含入口起点指定的所有模块及其依赖项，与「按需加载」的 Chunk 资源不同。
  • 有关 Initial Chunk 的详细信息，请参阅 Initial Chunk 介绍。
• Duplicate Packages: 打包到项目中的重复的第三方包。不包括未打包进产物的第三方包，请参阅重复第三方包。
• Concatenated Module: 串联模块是将多个模块在打包时提升或串联到一个闭包中。将每个模块封装在单独的函数中会增加浏览器中的运行时开销。可以通过开启 optimization.concatenateModules 参数来进行优化。

#🪐 产物概览

#产物信息卡

产物概览显示了 Total Files 等文件数目和大小信息。点击卡片可以展开资源详情，如下图所示：

• 点击详情图标，右侧会展示对应的资源树，并标明资源大小：

• 点击标签切换资源信息查看，例如：「Total JS | Initial JS」。同时，卡片上展示了资源的体积占比、体积大小以及资源数目。同样，点击右下图标可以展开资源列表。

#重复第三方包

• Duplicate Packages 卡片上展示了项目中重复的第三方包数量。点击图片可以查看重复第三方包的具体详情。请注意，这里的第三方包是被打包的第三方包。

更多信息，请参阅重复第三方包

#🪐 Tree map

Tree Map 视图可以直观展示各个模块之间的占比和关系，如下图所示。点击模块资源可以放大到该模块区域。

• Tree Map 视图也支持搜索模块资源，左侧的侧边栏可以过滤资源（Assets）和搜索模块（Modules）。点击模块的搜索结果可以放大到该模块区域。

• 双击某个区块可以展示其 Module 详情卡片，如下图所示。更多信息请参阅 Module 详情。

#🪐 Tree graph

Tree Graph 是一种基于文件树形式的构建产物分析视图，用于分析构建产物资源（Assets）以及所包含的 Modules 的大小和代码信息。在该模块中，可以查看 Assets 中 Module 打包后的实际代码大小、模块的原始代码、打包后的代码段以及模块引用关系。

点击导航栏的「Bundle Size」选项，即可查看 Bundle 分析报告。请注意，要展示此页面，需要开启构建产物分析能力 features。

#资源与模块关系展示

Bundle Analysis 模块用于分析构建产物资源（Assets）以及所包含的 Modules 的大小和代码信息。示例图如下：

• 左侧是 Assets 资源列表，按照资源大小降序排列，可以点击 「expand all」 按钮展开全部节点。
• 右侧是 Assets 对应的 Modules 列表，同样按照打包后模块大小降序排列。

#搜索筛选框

顶部工具栏从左到右依次是：搜索 Assets 工具、筛选 Assets 大小工具、筛选 Module 大小工具。

• 搜索 Entry 输入框：在输入框中输入 Entry 的关键词，可以搜索对应的 Entry，只展示该 Entry 下的 Assets 等。
• 搜索 Assets 输入框：在输入框中输入 Assets 的关键词，可以搜索对应的 Assets。
• Assets Size 筛选工具：填写数字，单位为：KB、MB，可以过滤掉小于所填 Size 的 Assets 资源。
• Module Size 筛选工具：填写数字，单位为：KB、MB，可以过滤掉小于所填 Size 的 Module 资源。

#模块搜索功能

支持模块搜索功能，用户可以通过点击「Search Module」按钮，打开模块搜索弹窗。输入模块名称来快速定位和查看模块所在的 Assets，从而更方便地分析模块的引用关系和大小。

如下图，可以看到匹配搜索 Module 关键字的结果：

#模块标签说明

Assets 标签如左图所示，从左到右依次代表：资源体积、Initial Chunk 和 代码查看。

Modules 标签如右图所示，从左到右依次代表：

• Bundled Size
  • 模块打包进产物的最终大小。一些标有 concatenated 的模块是串联模块，对此值有一定影响，请参阅下方的 concatenated module 解释。
• Concatenated Module 串联模块：将多个模块在打包时提升或串联到一个闭包中。有两种类型：
  • 一种是串联主模块，标明串联了多少个 Modules；
  • 另一种是被串联的子模块，标明其所属的串联模块。
• Module Explorer 标签：点击可打开 Module 之间的依赖关系分析页面。
• 代码查看 标签，点击可展开代码段，包括 Source（源码）、Transformed（编译后代码）和 Bundled（打包后代码）。

#支持 concatenated module 分析

串联模块 会将多个模块合并到同一个闭包中。这些模块可能来自不同的包。对于关闭 chunk splitting 的项目，这类分析尤其重要。

Rsdoctor 可以计算每个子模块经过 Tree Shaking 后的实际打包体积，帮助你了解各模块对最终产物体积的贡献、评估模块串联的影响，并优化分包策略。

Rsdoctor 2.x 会自动启用 Rspack 的原生分析插件，收集所需的 source map 数据。

串联模块分析不支持 eval 或 eval-* 类型的 devtool 配置，请改用 source-map 等非 eval 配置。

下图对比了同一产物在支持串联模块分析前后的报告。

• 支持前：无法显示子模块体积

• 支持后：可以显示子模块体积

#🪐 Module 详情

点击模块标签，可以查看模块详情，如下图所示：

• Reasons：顾名思义是 [原因] 的意思，即某个 Module 存在的原因。Reasons 就是该 Module 被哪些 Module 引入，而整个 Reasons Tree 就是这个 Module 的整个上游引用链，包括直接父级和间接父级。即 Rspack 的 stats.reasons。
• Dependencies：是该 Module 依赖了哪些 Module。
• Bailout Reason：Tree shaking 时，该 Module Tree shaking 失败的原因。

更多可查看详情：Module 详情