#产物分析

#⭐️ 功能概览

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 也成为了重点，尤其是采用 关闭 chunk splitting 方式打包的项目。

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,
  },
});