npm - @rsdoctor/docs - Versions diffs - 0.4.5 → 0.4.6 - Mend

@rsdoctor/docs 0.4.5 → 0.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/docs/en/_meta.json +1 -1
package/docs/en/blog/release/_meta.json +1 -1
package/docs/en/blog/release/release-note-0_4.mdx +74 -0
package/docs/en/guide/start/cli.mdx +19 -0
package/docs/en/guide/start/features.mdx +1 -1
package/docs/en/guide/start/quick-start-shared.mdx +0 -4
package/docs/en/guide/usage/_meta.json +2 -1
package/docs/en/guide/usage/bundle-diff.mdx +131 -0
package/docs/zh/_meta.json +1 -1
package/docs/zh/blog/release/_meta.json +1 -1
package/docs/zh/blog/release/release-note-0_4.mdx +77 -0
package/docs/zh/guide/start/cli.mdx +19 -0
package/docs/zh/guide/start/features.mdx +1 -1
package/docs/zh/guide/start/quick-start-shared.mdx +0 -4
package/docs/zh/guide/usage/_meta.json +2 -1
package/docs/zh/guide/usage/bundle-diff.mdx +131 -0
package/package.json +2 -2

package/docs/en/_meta.json CHANGED Viewed

@@ -11,7 +11,7 @@
   },
   {
     "text": "Blog",
-    "link": "/blog/release/release-note-0_1",
+    "link": "/blog/release/release-note-0_4",
     "activeMatch": "/blog/"
   }
 ]

package/docs/en/blog/release/_meta.json CHANGED Viewed

	@@ -1 +1 @@
1	- ["release-note-~~0_1~~", "release-note-0_3"]
1	+ ["release-note-0_4", "release-note-0_3", "release-note-0_1"]

package/docs/en/blog/release/release-note-0_4.mdx ADDED Viewed

@@ -0,0 +1,74 @@
+# Rsdoctor v0.4 Release Note
+Rsdoctor v0.4 is now released!
+The new features of Rsdoctor v0.4 include:
+- **Brief Mode**: Outputs a single HTML file, ideal for CI processes.
+- **Bundle Diff**: Compare and analyze changes between two build artifacts.
+- **Vue Loader Analysis**: Added support for loader analysis in Vue projects.
+## Brief Mode
+In Rsdoctor v0.4, a new **Brief mode** has been added, designed specifically for CI/CD scenarios. Brief mode consolidates the data report into a single HTML page, making it convenient for users to view historical build data in CI/CD and other scenarios. The main features of Brief mode are:
+- **Single report file**: Previously, Rsdoctor output multiple report data and `Manifest.json`, which was inconvenient for CDN upload and sharing. Brief mode outputs a single report, making it convenient for use in CI processes.
+- **Easy to configure**: Enable by configuring the [mode.brief](/config/options/options#mode) option in the Rsdoctor plugin.
+- **Report output**: The report will be generated in the build artifacts directory, and the output directory and filename of the Brief report can be configured.
+This feature greatly enhances the convenience of using Rsdoctor analysis reports in CI processes. The report can be uploaded to a CDN in the pipeline to display historical reports. [For more details, please refer to](/guide/start/cicd)
+## Bundle Diff
+import { Badge } from '@theme';
+<Badge text="Version: 0.4.5" type="warning" />
+The **Bundle Diff** feature helps users compare and analyze changes between two build artifacts. Key capabilities include:
+- **Total size change**: Displays the total size change between two build artifacts.
+- **File type change**: Compares the size changes of different types of files (JS, CSS, images, fonts, etc.).
+- **First screen resource change**: Analyzes the size changes of resources loaded on the first screen.
+- **Duplicate package count change**: Counts and compares the number of duplicate packages between two builds.
+- **NPM Packages change**: Displays changes in the number of NPM packages, including added, removed, and changed packages.
+- **Detailed data query**: Provides a detailed list module for deeper data query and analysis.
+- **Module-level comparison**: View the name, size, and change rate of modules, and supports viewing the code changes of modules.
+<div style={{ display: 'flex', justifyContent: 'space-between' }}>
+  <img
+    src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/6c20c39a1dd576a513c2a7cb0fb0d2e162f63343/others/assets/rsdoctor/bundle-diff-cards.png"
+    style={{ width: '48%' }}
+  />
+  <img
+    src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-module-list.png"
+    style={{ width: '48%' }}
+  />
+</div>
+This feature enhances the user's ability to visually analyze changes in build artifacts, helping users better understand and optimize build results. [For more details, please refer to](/guide/usage/bundle-diff)
+### Next
+Plans to support Bundle Diff Action on GitHub to simplify degradation monitoring during the CI phase.
+## Vue Loader Analysis
+<Badge text="Version: 0.4.5" type="warning" />
+Support for loader analysis for Vue projects has been added in Rsdoctor v0.4.
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/d8074588e99dbdcaa278cd1e82f1298663e425db/others/assets/rsdoctor/vue-loader.png" />
+## Other Features
+- **Rspack's builtin:lightningcss-loader analysis**: Added support for [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader#builtin-lightningcss-loader) analysis.
+- **Performance optimization**:
+  - Reduced the size of the `@rsdoctor/client` package by 60%, improving page rendering speed.
+  <img
+    src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/34e6d96d6948a08cade4bd419f50b962e228a4a8/others/assets/rsdoctor/package-size-diff.png"
+    style={{ width: '60%', margin: 'auto' }}
+  />
+  - Reduced third-party dependencies, thereby reducing the total download size during installation.

package/docs/en/guide/start/cli.mdx CHANGED Viewed

@@ -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.

package/docs/en/guide/start/features.mdx CHANGED Viewed

@@ -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)                                       |

package/docs/en/guide/start/quick-start-shared.mdx CHANGED Viewed

@@ -161,10 +161,6 @@ export default defineConfig({
 - **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
-#### 📢 Vue Project Notice
-Because `vue-loader` analysis is not supported at the moment, loader analysis is disabled by default for Vue projects. However, plugin and build artifact analysis can still be performed.
 ---
 ## Step 3: Run Build

package/docs/en/guide/usage/_meta.json CHANGED Viewed

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

package/docs/en/guide/usage/bundle-diff.mdx ADDED Viewed

@@ -0,0 +1,131 @@
+# Bundle Diff
+import { Badge } from '@theme';
+<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" />

package/docs/zh/_meta.json CHANGED Viewed

@@ -11,7 +11,7 @@
   },
   {
     "text": "博客",
-    "link": "/blog/release/release-note-0_1",
+    "link": "/blog/release/release-note-0_4",
     "activeMatch": "/blog/"
   }
 ]

package/docs/zh/blog/release/_meta.json CHANGED Viewed

	@@ -1 +1 @@
1	- ["release-note-~~0_1~~", "release-note-0_3"]
1	+ ["release-note-0_4", "release-note-0_3", "release-note-0_1"]

package/docs/zh/blog/release/release-note-0_4.mdx ADDED Viewed

@@ -0,0 +1,77 @@
+# Rsdoctor v0.4 Release Note
+Rsdoctor v0.4 已经发布啦!
+Rsdoctor v0.4 的新特性有:
+- **Brief 模式**: 输出单个报告文件，适用于 CI 流程。
+- **Bundle Diff**: 对比和分析两次构建产物的变化。
+- **Vue Loader 分析**: 增加了对 Vue 项目中 loader 分析的支持。
+## Brief Report
+在 Rsdoctor v0.4 中，新增了 **Brief 模式**，专为 CI/CD 场景设计。Brief 模式将数据报告整合到一个 HTML 页面中，方便用户在 CI/CD 及其他场景下查看历史构建数据。以下是 Brief 模式的主要特点：
+- **单个报告文件**：之前 Rsdoctor 输出的多个报告数据与 `Manifest.json`，不方便进行 CDN 上传和共享，Brief 模式输出单一报告方便 CI 流程中使用。
+- **易于配置**：通过配置 Rsdoctor 插件的 [mode.brief](/config/options/options#mode) 选项即可开启 Brief 模式。
+- **报告输出**：报告会生成在构建产物目录中，同时可配置 Brief 报告生成目录和文件名。
+此功能极大地提升了在 CI 流程中使用 Rsdoctor 分析报告的便捷性，可以在 Pipeline 中将报告上传到 CDN 以便展示历史报告。[详情请参阅](/guide/start/cicd)
+## Bundle Diff
+import { Badge } from '@theme';
+<Badge text="Version: 0.4.5" type="warning" />
+我们引入了 **Bundle Diff** 功能，帮助用户对比分析两次构建产物的变化。以下是 Bundle Diff 的主要能力：
+- **总体积变化**：展示两次构建产物的总体积变化。
+- **文件类型变化**：对比不同类型文件（如 JS、CSS、图片、字体等）的体积变化。
+- **首屏资源变化**：分析首屏加载资源的体积变化。
+- **重复包数量变化**：统计并对比两次构建中重复包的数量变化。
+- **NPM Packages 变化**：展示 NPM 包的数量变化，包括新增、删除和变更的包。
+- **详细数据查询**：通过详情列表模块，进行更深入的数据查询和分析。
+- **模块级别对比**：查看模块的名称、体积及变化幅度，并支持查看模块代码的变更。
+<div style={{ display: 'flex', justifyContent: 'space-between' }}>
+  <img
+    src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/6c20c39a1dd576a513c2a7cb0fb0d2e162f63343/others/assets/rsdoctor/bundle-diff-cards.png"
+    style={{ width: '48%' }}
+  />
+  <img
+    src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-module-list.png"
+    style={{ width: '48%' }}
+  />
+</div>
+此功能极大地提升了用户对构建产物变化的可视化分析能力，帮助用户更好地理解和优化构建结果。[详情请参阅](/guide/usage/bundle-diff)
+### 计划
+后续将计划支持用于 GitHub 平台的 Bundle Diff Action，更方便的进行 CI 阶段的劣化监控。
+## 支持 Vue Loader 分析能力
+<Badge text="Version: 0.4.5" type="warning" />
+在 Rsdoctor 0.4 版本中支持了 Vue 项目的 Loader 分析。
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/d8074588e99dbdcaa278cd1e82f1298663e425db/others/assets/rsdoctor/vue-loader.png" />
+## 其他 Feature
+- 支持了 Rspack 的 builtin:lightningcss-loader 分析
+  在 Rsdoctor 0.4 版本中支持了 Rspack 的 [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader#builtin-lightningcss-loader) 分析。
+- Rsdoctor 自身的性能优化
+  - 减少了 60% 的 `@rsdoctor/client` 包体积，提高页面渲染速度。
+  <img
+    src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/34e6d96d6948a08cade4bd419f50b962e228a4a8/others/assets/rsdoctor/package-size-diff.png"
+    style={{ width: '60%', margin: 'auto' }}
+  />
+  - 减少 Rsdoctor 可替代的第三方依赖包，从而减少安装时下载总大小。

package/docs/zh/guide/start/cli.mdx CHANGED Viewed

@@ -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 运行时进行调用。

package/docs/zh/guide/start/features.mdx CHANGED Viewed

@@ -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)                  |

package/docs/zh/guide/start/quick-start-shared.mdx CHANGED Viewed

@@ -160,10 +160,6 @@ export default defineConfig({
 - **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
-#### 📢 Vue 项目使用注意
-由于目前不支持对 `vue-loader` 进行分析，对于 Vue 项目，默认情况下禁用了 loader 分析。但是，仍然可以进行插件和构建产物的分析。
 ---
 ## 第三步：执行构建

package/docs/zh/guide/usage/_meta.json CHANGED Viewed

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

package/docs/zh/guide/usage/bundle-diff.mdx ADDED Viewed

@@ -0,0 +1,131 @@
+# Bundle Diff
+import { Badge } from '@theme';
+<Badge text="Version: 0.4.5" type="warning" />
+我们提供了 Bundle Diff 的功能，可以让你进行对比分析两次构建产物发生的变化。
+目前我们提供了以下几种使用方式：
+- [CLI 本地打开](/guide/start/cli)
+- 在线上传分析（计划支持）
+## 使用方式
+### CLI 本地打开
+首先你需要准备 **2 份** Rsdoctor 产出的[manifest.json](/config/options/term#manifestjson)，然后通过安装[@rsdoctor/cli](/guide/start/cli#%E5%AE%89%E8%A3%85-rsdoctorcli) 并使用 CLI 提供的 `bundle-diff` 命令，详见[命令使用教程](/guide/start/cli#bundle-diff-%E5%91%BD%E4%BB%A4)。
+### 在线上传分析（计划支持）
+我们计划提供了一个在线页面用于 Bundle Diff 分析，你可以通过在页面中上传 **2 份** Rsdoctor 产出的[manifest.json](/config/options/term#manifestjson)，其中一份作为基准（Baseline），另一份则作为当前产物结果 (Current)，通过点击 Start Diff 则就可以进入我们的分析页面。
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/51ae2fdf0635ebf52ef04a11f779314c64ef2fb6/others/assets/rsdoctor/bundle-diff.png" />
+## 使用指南
+### 功能概览
+在 Bundle Diff 模块，你可以看到两次产物结果的信息对比，其中包含:
+- **总体积变化**
+- **不同类型文件的体积变化**
+- **首屏资源的体积变化**
+- **重复包的数量变化**
+- **NPM Packages 的数量变化** 等信息
+除了上面的数据变化概览之外，我们还能通过页面下方的**详情列表**模块，进行更深入的数据查询分析。
+### 名词释义
+| 名词                             | 描述说明                                                                           |
+| -------------------------------- | ---------------------------------------------------------------------------------- |
+| <b><i>Baseline</i></b>           | 代表作为**基准的数据源**                                                           |
+| <b><i>Current</i></b>            | 代表当前需要**与 Baseline 进行对比的目标数据源**                                   |
+| <b><i>Asset / Assets</i></b>     | 代表当前**产物文件**                                                               |
+| <b><i>Bundle Size</i></b>        | 代表产物中**所有文件**的体积                                                       |
+| <b><i>Total JS</i></b>           | 代表产物中所有 `.js` 文件的体积                                                    |
+| <b><i>Initial JS</i></b>         | 代表产物中所有**首屏**加载的 `.js` 文件的体积                                      |
+| <b><i>Total CSS</i></b>          | 代表产物中所有 `.css` 文件的体积                                                   |
+| <b><i>Initial CSS</i></b>        | 代表产物中所有**首屏**加载的 `.css` 文件的体积                                     |
+| <b><i>Image</i></b>              | 代表产物中所有 `.png`/`.jpg`/`.svg`/`.webp`/`.jpeg`/`.gif`/`.bmp` 的文件体积       |
+| <b><i>Font</i></b>               | 代表产物中所有 `.ttf`/`.fnt`/`.fon`/`.otf` 的文件体积                              |
+| <b><i>Media</i></b>              | 代表产物中所有 `.mp3`/`.mp4`/`.avi`/`.wav`/`.flv`/`.mov`/`.mpg`/`.mpeg` 的文件体积 |
+| <b><i>HTML</i></b>               | 代表产物中所有 `.html` 的文件体积                                                  |
+| <b><i>Duplicate Packages</i></b> | 代表产物中存在的**重复包总数**                                                     |
+| <b><i>Modules</i></b>            | 代表产物中 Module 总数                                                             |
+| <b><i>Packages</i></b>           | 代表产物中存在的 **NPM Packages 总数**                                             |
+| <b><i>New</i></b>                | 代表**新增**，即 **Baseline 中不存在，Current 中存在**                             |
+| <b><i>Deleted</i></b>            | 代表**移除了**，即 **Baseline 中存在，Current 中不存在**                           |
+| <b><i>Changed</i></b>            | 代表**只发生了内容改变**，即 **Baseline 和 Current 中都存在**，但是**内容变化**了  |
+| <b><i>Parsed Size</i></b>        | 代表**打包进产物的最终体积**                                                       |
+### 使用说明
+#### 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 总数，以及新增、删除、变更的数量变化。
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/6c20c39a1dd576a513c2a7cb0fb0d2e162f63343/others/assets/rsdoctor/bundle-diff-cards.png" />
+#### Overview
+在 Overview 模块中，我们可以看到不同**文件类型维度**的**体积**、**数量**以及**变化幅度**。
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/6c20c39a1dd576a513c2a7cb0fb0d2e162f63343/others/assets/rsdoctor/bundle-diff-all.png" />
+#### Assets
+:::tip
+Rsdoctor 在展示 Asset 名称时，会尝试移除产物文件名中的 hash 值，以方便进行产物文件对比。
+:::
+在 Assets 模块中，我们可以看到产物文件之间的**体积**以及**变化幅度**。
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-assets-list.png" />
+同时**点击**列表项目前的 **"+" 按钮**，则可以展开看到对应 Asset 所**包含的模块列表**（即 `Modules of "xxx"`），其中则会显示模块之间的**体积**以及**变化幅度**。
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-assets.png" />
+Rsdoctor 会**兼容同名 Assets 文件 hash 不同**的情况，但是对于**拆包产生的命名不同的 Assets**，Rsdoctor 则无法辨别其比较对象。
+所以 Rsdoctor Assets 模块**还提供了 select 组件**，你可以**手动选择想要对比的 Assets 资源**。
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/6c20c39a1dd576a513c2a7cb0fb0d2e162f63343/others/assets/rsdoctor/bundle-diff-select-assets.png" />
+#### Modules
+在 Modules 模块中，我们可以看到两次产物中包含的所有模块的**名称**、**体积**以及**变化幅度**。
+其中 `New` / `Deleted` / `Changed` 标签则代表模块在 `Current` 中到底是 新增 还是 被删除 或者只是发生了改变。
+而 `node_modules` 标签则意味着该模块的路径中包含了 `/node_modules/`。
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-module-list.png" />
+在列表项的右侧，则可以通过对应的「View Changes」按钮来查看模块代码的变更。
+**代码对比，分几种数据：**
+- **Source Code: 源码数据。** `Normal` 模式下存在代码资源，`Lite` 模式下不存在代码资源，`Brief` 模式不存在代码资源。
+- **Bundled Code: 构建后代码。** `Normal` 模式下存在代码资源，`Lite` 模式下存在代码资源，`Brief` 模式不存在代码资源。
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-module-changes.png" />
+#### Packages
+在 Packages 模块，我们可以看到两次产物中包含的**所有 NPM Packages 列表**，每个列表项则会包含其对应的 **Package Name**、**Version（版本号）**、**Parsed Size（打包后的最终体积）**。
+<img src="https://raw.githubusercontent.com/rspack-contrib/rstack-design-resources/632e3087495b569de77a93235196fdacf09627d5/others/assets/rsdoctor/bundle-diff-packages.png" />

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/docs",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/web-infra-dev/rsdoctor",
@@ -28,7 +28,7 @@
     "rsbuild-plugin-open-graph": "^1.0.2",
     "rspress-plugin-font-open-sans": "^1.0.0",
     "typescript": "^5.2.2",
-    "@rsdoctor/types": "0.4.5"
+    "@rsdoctor/types": "0.4.6"
   },
   "dependencies": {
     "react-markdown": "^9.0.1",