#Bundle diff

我们提供了 Bundle Diff 的功能，可以让你进行对比分析两次构建产物发生的变化。

目前我们提供了以下几种使用方式：

• 通过 CLI 在本地打开报告
• 通过 CLI 生成 JSON 报告
• 在线上传分析（计划支持）

#使用方式

#通过 CLI 在本地打开报告

首先你需要准备 2 份 Rsdoctor 产出的manifest.json，然后通过安装@rsdoctor/cli 并使用 CLI 提供的 bundle-diff 命令，详见命令使用教程。

#通过 CLI 生成 JSON 报告

使用 --json [path] 可以直接生成结构化差异报告，而不会启动报告服务器或打开浏览器：

rsdoctor bundle-diff \
  --baseline="baseline/.rsdoctor/manifest.json" \
  --current="current/.rsdoctor/manifest.json" \
  --json="result.json"

如果省略 --json 后的路径，报告将保存为 rsdoctor-diff.json。报告包含 assets、modules 和 packages 的差异数据，可用于 CI 流程或生成 Pull Request 评论。

#在线上传分析（计划支持）

我们计划提供了一个在线页面用于 Bundle Diff 分析，你可以通过在页面中上传 2 份 Rsdoctor 产出的manifest.json，其中一份作为基准（Baseline），另一份则作为当前产物结果 (Current)，通过点击 Start Diff 则就可以进入我们的分析页面。

#使用指南

#功能概览

在 Bundle Diff 模块，你可以看到两次产物结果的信息对比，其中包含:

• 总体积变化
• 不同类型文件的体积变化
• 首屏资源的体积变化
• 重复包的数量变化
• NPM Packages 的数量变化 等信息

除了上面的数据变化概览之外，我们还能通过页面下方的详情列表模块，进行更深入的数据查询分析。

#名词释义

#使用说明

#Dashboard

在页面顶部，我们可以看到很多数据由不同的卡片组成，其中包含了如下信息：

• Bundle Size 包含了两次产物总体积以及变化幅度。
• Total JS | Initial JS 包含了两次产物中 所有 JS 与 首屏 JS 的总体积以及变化幅度。
• Total CSS | Initial CSS 包含了两次产物中 所有 CSS 与 首屏 CSS 的总体积以及变化幅度。
• Image | Font | Media 包含了图片、字体、音频类文件的体积以及变化幅度。
• HTML 包含了 html 文件的体积以及变化幅度。
• Others 代表除了上述文件外的其他所有文件的体积以及变化幅度。
• Duplicate Package 代表两次产物中存在的重复包数量，点击则可以查看对应的重复包详情。
• Modules 代表两次产物中存在的 Modules 数量。
• Packages 代表两次产物中存在的 NPM Packages 总数，以及新增、删除、变更的数量变化。

#Overview

在 Overview 模块中，我们可以看到不同文件类型维度的体积、数量以及变化幅度。

#Assets

在 Assets 模块中，我们可以看到产物文件之间的体积以及变化幅度。

同时点击列表项目前的 "+" 按钮，则可以展开看到对应 Asset 所包含的模块列表（即 Modules of "***"），其中则会显示模块之间的体积以及变化幅度。

Rsdoctor 会兼容同名 Assets 文件 hash 不同的情况，但是对于拆包产生的命名不同的 Assets，Rsdoctor 则无法辨别其比较对象。

所以 Rsdoctor Assets 模块还提供了 select 组件，你可以手动选择想要对比的 Assets 资源。

#Modules

在 Modules 模块中，我们可以看到两次产物中包含的所有模块的名称、体积以及变化幅度。

其中 New / Deleted / Changed 标签则代表模块在 Current 中到底是 新增 还是 被删除 或者只是发生了改变。

而 node_modules 标签则意味着该模块的路径中包含了 /node_modules/。

在列表项的右侧，则可以通过对应的「View Changes」按钮来查看模块代码的变更。

代码对比，分几种数据：

• Source Code: 源码数据。 Normal 模式下存在代码资源，Lite 模式下不存在代码资源，Brief 模式不存在代码资源。
• Bundled Code: 构建后代码。 Normal 模式下存在代码资源，Lite 模式下存在代码资源，Brief 模式不存在代码资源。

#Packages

在 Packages 模块，我们可以看到两次产物中包含的所有 NPM Packages 列表，每个列表项则会包含其对应的 Package Name、Version（版本号）、Parsed Size（打包后的最终体积）。