chore(docs): add bundle-diff documents

packages/components/src/utils/i18n/cn.ts

@@ -17,20 +17,25 @@ const cn: typeof en = {
   'Project Overall': '项目信息概览',
   'Compile Overall': '编译数据概览',
   'Bundle Overall': '产物数据概览',
-  'Expand Omitted': ' reasons 树会默认折叠中间的第三方引入的模块，点击这个图标可以查看完整树图',
+  'Expand Omitted':
+    ' reasons 树会默认折叠中间的第三方引入的模块，点击这个图标可以查看完整树图',
   'Concatenated Tag':
     '串联模块，hover 上去可以显示聚合成的主模块名称。注：聚合模块 bundled size 为零，有可能是因为被聚合到了主模块中。',
 
-  'the file content not changed after transpiled by this loader': '该文件内容在 loader 处理前后没有发生变化',
+  'the file content not changed after transpiled by this loader':
+    '该文件内容在 loader 处理前后没有发生变化',
 
   /** Bundle Size */
   'Output Assets List': '产物文件列表',
-  'filter the output assets which size is greater than the input value': '筛选大小大于输入值的产物文件',
-  'filter the modules which size is greater than the input value': '筛选大小大于输入值的模块',
+  'filter the output assets which size is greater than the input value':
+    '筛选大小大于输入值的产物文件',
+  'filter the modules which size is greater than the input value':
+    '筛选大小大于输入值的模块',
   'After Compile': '编译后',
   'After Bundle': '打包后',
   CodeModeExplain: 'Lite 模式下或纯 stats.json 上传的情况下只有 source code.',
-  DuplicatePakCodeExplain: '纯 stats.json 输入的情况下没有代码，可使用 web-doctor 插件参与构建会有对应代码。',
+  DuplicatePakCodeExplain:
+    '纯 stats.json 输入的情况下没有代码，可使用 Rsdoctor 插件参与构建会有对应代码。',
 };
 
 export default cn;

packages/document/docs/en/guide/start/cli.mdx

@@ -49,6 +49,25 @@ rsdoctor analyze --profile <manifestFile>
 rsdoctor analyze --profile "./dist/.rsdoctor/manifest.json"
 ```
 
+### `bundle-diff` Command
+
+The `bundle-diff` command is used to load **two** [manifest.json](/config/options/term#manifestjson) files **locally** and open the Rsdoctor [Bundle Diff](../usage/bundle-diff) page for **comparison and analysis of build bundles**.
+
+```bash
+rsdoctor bundle-diff --baseline <baselineManifestJsonPath> --current <currentManifestJsonPath>
+```
+
+**Parameter Definitions**
+
+- `baselineManifestJsonPath` Path to the [manifest.json](/config/options/term#manifestjson) used as the **baseline** (supports local paths as well as online URLs).
+- `currentManifestJsonPath` Path to the [manifest.json](/config/options/term#manifestjson) used as the **current** (supports local paths as well as online URLs) for comparison with the **baseline**.
+
+**Usage Example**
+
+```bash
+rsdoctor bundle-diff --baseline="baseline/.rsdoctor/manifest.json" --current="current/.rsdoctor/manifest.json"
+```
+
 ## Node API
 
 We provide a Node.js API in `@rsdoctor/cli` that allows you to make calls during runtime in Node.js.

packages/document/docs/en/guide/start/features.mdx

@@ -33,4 +33,4 @@ Here you can learn about the main features supported by Rsdoctor.
 | Bundle Analysis                 | Analysis of the relationships between assets, chunks, and modules in the artifact, as well as the packaged code and size analysis of each module, etc. | [Bundle Analysis](../usage/bundle-size)                                   |
 | Module Analysis                 | Analysis of module dependencies                                                                                                                        | [Modules Dependency Analysis](../usage/module-analysis)                   |
 | Duplicate Packages Optimization | Inspection of duplicate dependencies used in the project                                                                                               | [Duplicate Packages Optimization](../../blog/topic/duplicate-pkg-problem) |
-| Bundle Diff                     | Comparative analysis of two artifacts                                                                                                                  | Planned support                                                           |
+| Bundle Diff                     | Comparative analysis of two artifacts                                                                                                                  | [Bundle Diff](../usage/bundle-diff)                                       |

packages/document/docs/en/guide/usage/_meta.json

@@ -10,5 +10,6 @@
   "bundle-size",
   "module-analysis",
   "resolver",
-  "rule-config"
+  "rule-config",
+  "bundle-diff"
 ]

packages/document/docs/en/guide/usage/bundle-diff.mdx

@@ -0,0 +1,129 @@
+# Bundle Diff
+
+<Badge text="Version: 0.4.5" type="warning" />
+
+We provide the Bundle Diff feature, which allows you to compare and analyze the changes between two build bundles.
+
+Currently, we offer the following usage methods:
+
+- [Open locally with CLI](/guide/start/cli)
+- Online upload analysis (planned support)
+
+## Usage
+
+### Open locally with CLI
+
+First, you need to prepare **2 copies** of the [manifest.json](/config/options/term#manifestjson) produced by Rsdoctor. Then, install [@rsdoctor/cli](/guide/start/cli#cli-tutorial) and use the CLI command `bundle-diff`. For detailed command usage, see [command usage tutorial](/guide/start/cli#bundle-diff-command).
+
+### Online upload analysis (planned support)
+
+We plan to provide an online page for Bundle Diff analysis. You can upload **2 copies** of the [manifest.json](/config/options/term#manifestjson) produced by Rsdoctor on the page, one as the Baseline and the other as the Current. By clicking Start Diff, you can enter our analysis page.
+
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/51ae2fdf0635ebf52ef04a11f779314c64ef2fb6/others/assets/rsdoctor/bundle-diff.png" />
+
+## User Guide
+
+### Feature Overview
+
+In the Bundle Diff module, you can see the comparison of information between the two build bundles, including:
+
+- **total size changes**
+- **size changes of different file types**
+- **initial bundles size changes**
+- **changes in the number of duplicate packages**
+- **changes in the number of NPM Packages**, and more.
+
+In addition to the above data overview, we can also perform more in-depth data query and analysis through the **details list** module at the bottom of the page.
+
+### Terminology
+
+| Term                             | Description                                                                                                                |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| <b><i>Baseline</i></b>           | Represents the **reference data source**                                                                                   |
+| <b><i>Current</i></b>            | Represents the **target data source** to be compared with the Baseline                                                     |
+| <b><i>Asset / Assets</i></b>     | Represents the **build files**                                                                                             |
+| <b><i>Bundle Size</i></b>        | Represents the **total size** of all files in the build                                                                    |
+| <b><i>Total JS</i></b>           | Represents the total size of all `.js` files in the build                                                                  |
+| <b><i>Initial JS</i></b>         | Represents the total size of all **first screen** `.js` files in the build                                                 |
+| <b><i>Total CSS</i></b>          | Represents the total size of all `.css` files in the build                                                                 |
+| <b><i>Initial CSS</i></b>        | Represents the total size of all **first screen** `.css` files in the build                                                |
+| <b><i>Image</i></b>              | Represents the total size of all `.png`/`.jpg`/`.svg`/`.webp`/`.jpeg`/`.gif`/`.bmp` files in the build                     |
+| <b><i>Font</i></b>               | Represents the total size of all `.ttf`/`.fnt`/`.fon`/`.otf` files in the build                                            |
+| <b><i>Media</i></b>              | Represents the total size of all `.mp3`/`.mp4`/`.avi`/`.wav`/`.flv`/`.mov`/`.mpg`/`.mpeg` files in the build               |
+| <b><i>HTML</i></b>               | Represents the total size of all `.html` files in the build                                                                |
+| <b><i>Duplicate Packages</i></b> | Represents the **total number of duplicate packages** in the build                                                         |
+| <b><i>Modules</i></b>            | Represents the total number of modules in the build                                                                        |
+| <b><i>Packages</i></b>           | Represents the total number of **NPM Packages** in the build                                                               |
+| <b><i>New</i></b>                | Represents **newly added** items, i.e., **not present in Baseline but present in Current**                                 |
+| <b><i>Deleted</i></b>            | Represents **removed** items, i.e., **present in Baseline but not in Current**                                             |
+| <b><i>Changed</i></b>            | Represents items that **only changed in content**, i.e., **present in both Baseline and Current but with content changes** |
+| <b><i>Parsed Size</i></b>        | Represents the **final size** of the build bundles                                                                         |
+
+### Instructions
+
+#### Dashboard
+
+At the top of the page, we can see many data points composed of different cards, including the following information:
+
+- **Bundle Size** includes the total size of the two builds and the change rate.
+- **Total JS | Initial JS** includes the total size and change rate of all JS and first screen JS in the two builds.
+- **Total CSS | Initial CSS** includes the total size and change rate of all CSS and first screen CSS in the two builds.
+- **Image | Font | Media** includes the size and change rate of image, font, and media files.
+- **HTML** includes the size and change rate of HTML files.
+- **Others** represents the size and change rate of all other files not mentioned above.
+- **Duplicate Package** represents the number of duplicate packages in the two builds. Clicking on it allows you to view the details of the duplicate packages.
+- **Modules** represents the number of modules in the two builds.
+- **Packages** represents the total number of NPM Packages in the two builds, as well as the number of new, deleted, and changed packages.
+
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/6c20c39a1dd576a513c2a7cb0fb0d2e162f63343/others/assets/rsdoctor/bundle-diff-cards.png" />
+
+#### Overview
+
+In the Overview module, we can see the **size**, **quantity**, and **change rate** of different **file types**.
+
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/6c20c39a1dd576a513c2a7cb0fb0d2e162f63343/others/assets/rsdoctor/bundle-diff-all.png" />
+
+#### Assets
+
+:::tip
+When displaying Asset names, Rsdoctor tries to remove the hash values from the build file names to facilitate comparison.
+:::
+
+In the Assets module, we can see the **size** and **change rate** of the build files.
+
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-assets-list.png" />
+
+By **clicking** the **"+" button** in front of the list items, you can expand to see the **list of modules** contained in the corresponding Asset (i.e., `Modules of "xxx"`), which shows the **size** and **change rate** of the modules.
+
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-assets.png" />
+
+Rsdoctor is compatible with the situation where Assets files have **the same name but different hashes**. However, for Assets with **different names generated by splitting packages**, Rsdoctor cannot identify their comparison objects.
+
+Therefore, the Rsdoctor Assets module also provides a select component, allowing you to **manually select the Assets resources you want to compare**.
+
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/6c20c39a1dd576a513c2a7cb0fb0d2e162f63343/others/assets/rsdoctor/bundle-diff-select-assets.png" />
+
+#### Modules
+
+In the Modules module, we can see the **name**, **size**, and **change rate** of all modules contained in the two builds.
+
+The `New` / `Deleted` / `Changed` tags indicate whether the module is newly added, deleted, or just changed in the `Current` build.
+
+The `node_modules` tag indicates that the module's path contains `/node_modules/`.
+
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-module-list.png" />
+
+On the right side of the list items, you can view the module code changes by clicking the corresponding "View Changes" button.
+
+**Code comparison includes several types of data:**
+
+- **Source Code: Source code data.** Available in `Normal` mode, not available in `Lite` mode, and not available in `Brief` mode.
+- **Bundled Code: Built code.** Available in `Normal` mode, available in `Lite` mode, and not available in `Brief` mode.
+
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-module-changes.png" />
+
+#### Packages
+
+In the Packages module, we can see the **list of all NPM Packages** contained in the two builds. Each list item includes the **Package Name**, **Version**, and **Parsed Size** (final size after packaging).
+
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-packages.png" />

packages/document/docs/zh/guide/start/cli.mdx

@@ -49,6 +49,25 @@ rsdoctor analyze --profile <manifestFile>
 rsdoctor analyze --profile "./dist/.rsdoctor/manifest.json"
 ```
 
+### bundle-diff 命令
+
+`bundle-diff` 命令是用于在**本地**加载**两份** [manifest.json](/config/options/term#manifestjson) 并且打开 Rsdoctor 的 [Bundle Diff](../usage/bundle-diff) 页面进行**构建产物的对比和分析**。
+
+```bash
+rsdoctor bundle-diff --baseline <baselineManifestJsonPath> --current <currentManifestJsonPath>
+```
+
+**参数定义**
+
+- `baselineManifestJsonPath` 当作 **基准** 的 [manifest.json](/config/options/term#manifestjson) 的路径（支持本地路径以及在线 url）
+- `currentManifestJsonPath` 当作 **当前** 的 [manifest.json](/config/options/term#manifestjson) 的路径（支持本地路径以及在线 url），用于和 **基准** 进行对比
+
+**使用示例**
+
+```bash
+rsdoctor bundle-diff --baseline="baseline/.rsdoctor/manifest.json" --current="current/.rsdoctor/manifest.json"
+```
+
 ## Node API
 
 我们在 `@rsdoctor/cli` 中提供了 Node.js API，可以让你在 Node.js 运行时进行调用。

packages/document/docs/zh/guide/start/features.mdx

@@ -33,4 +33,4 @@
 | 产物分析    | 产物中 assets、chunks、modules 关系分析，以及每个 module 打包代码及大小分析等 | [产物分析](../usage/bundle-size)                     |
 | 模块分析    | Modules 依赖关系分析                                                          | [Modules 依赖链分析](../usage/module-analysis)       |
 | 重复包优化  | 检查项目使用的依赖包的重复情况                                                | [重复包优化](../../blog/topic/duplicate-pkg-problem) |
-| Bundle Diff | 两份产物对比分析                                                              | 计划支持                                             |
+| Bundle Diff | 两份产物对比分析                                                              | [Bundle Diff](../usage/bundle-diff)                  |

packages/document/docs/zh/guide/usage/_meta.json

@@ -10,5 +10,6 @@
   "bundle-size",
   "module-analysis",
   "resolver",
-  "rule-config"
+  "rule-config",
+  "bundle-diff"
 ]