#产物分析

#⭐️ 功能概览

Rsdoctor 提供了 Bundle Size 模块，该模块主要用于分析 Webpack 或 Rspack 构建产物的信息，包括当前编译产物的资源大小、重复包、模块引用关系等：

• 产物概览：展示产物总数、各类型文件数目、大小以及占比，以及重复包和重复包的引用链，👉🏻 产物概览
• 产物分析（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 和 Webpack Modules。
• Source Size：文件的原始大小，未经过任何转换和压缩。
• Bundle Size：文件最终输出的大小。如果开启了压缩，这个值代表压缩后的大小。
• Gzip Size：文件经过 gzip 压缩后的大小。
• Package Count：第三方包的数量。
• Initial Chunk: initial(初始化) 是入口起点的主 Chunk，该 Chunk 包含入口起点指定的所有模块及其依赖项，与「按需加载」的 Chunk 资源不同。
  • 有关 Initial Chunk 的详细信息，请参阅 Initial Chunk 介绍。
• Duplicate Packages: 打包到项目中的重复的第三方包。不包括未打包进产物的第三方包，请参阅重复第三方包。
• Concatenated Module: 串联模块是将多个模块在打包时提升或串联到一个闭包中。在过去，Webpack 在打包时会将每个模块都打包到单独的闭包中，这种封装函数会导致 JavaScript 在浏览器中执行时较慢。可以通过开启 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 内。这种子模块无法继续拆解打包后的代码，因此无法得知具体的 Bundled Size，只能得知整个串联模块的大小，该大小标注在主模块尾部。
• Module Explorer 标签：点击可打开 Module 之间的依赖关系分析页面。
• 代码查看 标签，点击可展开代码段，包括 Source（源码）、Transformed（编译后代码）和 Bundled（打包后代码）。

#支持 concatenated module 分析

Concatenated Module 是多个 Modules 被合并在了一个闭包中，无法通过 AST 语法分析拆解。但 concatenated module 中可能包含不同 Package 的代码，分析 concatenated module 内部子 Modules 也成为了重点，尤其是采用 "all-in-one" 方式打包的项目。

Rsdoctor 支持了对 Concatenated Module 的拆解并精确计算 concatenated module 中子 modules 的真实的打包后的体积，帮助开发者准确识别 Tree Shaking 后的实际构建体积，分析合并模块对最终 bundle 大小的影响以及优化分包策略。

• Rspack 项目：Rspack（>=1.4.11）内部的 Rsdoctor native 插件增强了 sourcemap 相关能力，可以在不开启 source map 的情况下，无痛分析 concatenate module。

可以看到下图，是 'all-in-one' 的打包分析，上图为之前无法分析的情况，下图为可分析情况

• 不支持分析

• 支持分析

• webpack 项目：需要开启 sourcemap，才可以准确拆解并分析 concatenated module，配置如下。

export default {
  // ...
  devtool: 'cheap-source-map', // 或其他 devtool 配置
};

• Rsdoctor 对 Concatenated Module 分析支持如下 Sourcemap 配置：
  • source-map
  • hidden-source-map
  • inline-source-map
  • cheap-source-map
  • cheap-module-source-map
  • nosources-source-map

#🪐 Module 详情

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

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

更多可查看详情：Module 详情

#🪐 支持 BannerPlugin

由于 Rspack 和 webpack 都支持 BannerPlugin，BannerPlugin 是一个可在生成的 chunk 顶部或尾部添加指定内容的内置插件。

添加的代码段将会影响到对 Bundle 的解析能力。

Rsdoctor 兼容了 BannerPlugin 这种添加代码的逻辑，但因为 Rsdoctor 需要添加标记代码，所以没有默认开启。以下两种情况会开启 Rsdoctor BannerPlugin 能力：

1. 项目在 rspack.config.(js|ts) 或 webpack.config.(js|ts) 中使用了 BannerPlugin；

2. 通过 Rsdoctor options 配置 supports.banner 来开启：

new RsdoctorRspackPlugin({
  supports: {
    banner: true,
  },
});