@rsdoctor/docs 1.3.16 → 1.4.0

package/docs/en/guide/more/faq.mdx

@@ -2,7 +2,7 @@
 
 ## How to use only a specific feature of Rsdoctor?
 
-When we **only need** the [bundle size analysis](../usage/bundle-size) feature of Rsdoctor, we can configure the corresponding [Features](/config/options/options) option when integrating the Rsdoctor plugin. Refer to the code snippet below:
+When we **only need** the [Bundle Size](../usage/bundle-size) bundle size analysis feature **within** Rsdoctor, we can add the corresponding [features](/config/options/features) option when configuring the Rsdoctor plugin. Refer to the code snippet below:
 
 ```ts
 import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
@@ -14,16 +14,14 @@ new RsdoctorRspackPlugin({
 
 ## Loader timing data is inaccurate?
 
-The timing data provided by Rsdoctor for loaders is an **estimated time**. Why can't it accurately measure the timing? It's because we know that loader execution can be both **asynchronous** and **synchronous**.
-Additionally, the bundler will **parallelize the execution** of multiple non-conflicting loader functions. Since JavaScript is single-threaded, multiple loader functions can **compete for the current task queue**.
-Furthermore, the asynchronous logic within loader functions cannot be recognized, causing a single loader function to potentially span across the execution of multiple other loaders. As a result, there are three possible cases, as shown in the following diagram:
+The timing data provided by Rsdoctor for loaders is an **estimated time**. The reason accurate timing cannot be measured is that loader execution can be both **asynchronous** and **synchronous** functions, the bundler will **parallelize the execution** of multiple non-conflicting loader functions, and since **JavaScript is single-threaded**, multiple loader functions can **compete for the current task queue**. Furthermore, the **asynchronous logic within loader functions cannot be recognized**, causing a single loader function to potentially **span across** the execution of multiple other loaders. As a result, there are three possible cases, as shown in the following diagram:
 
 <img
   src="https://assets.rspack.rs/others/assets/rsdoctor/loader-cases.jpeg"
-  style={{ width: '250px' }}
+  style={{ width: '250px', margin: 'auto' }}
 />
 
-Therefore, the loader timing provided by Rsdoctor is an **estimate**. The timing data we provide is adapted to handle Case 1 and Case 2 from the diagram. As for Case 3, we are still exploring solutions.
+Therefore, the loader timing provided by Rsdoctor is an **estimated** value. The timing data we provide accurately reflects scenario 1 and scenario 2 from the diagram. As for scenario 3, we are still exploring solutions.
 
 ## `out of memory` error when using `Rsdoctor` for building
 
@@ -31,35 +29,57 @@ If you encounter an `out of memory` error, you can try the following two methods
 
 ### Method 1
 
-Increase the memory limit of Node, for example: NODE_OPTIONS=--max-old-space-size=8096.
+Increase the Node.js memory limit, for example: `NODE_OPTIONS=--max-old-space-size=8096`.
 
 ### Method 2
 
-You can add the `lite` field to the `features` array to use the lite mode. Additionally, since the `features` array overrides the default configuration when it is an array, you should:
+This issue is often caused by storing source code information during the build process, which exceeds the memory limit. You can configure the `noCode` or `noAssetsAndModuleSource` field in `output.reportCodeType` to alleviate this issue. [output.reportCodeType](/config/options/output#reportcodetype)
 
-- Add `loader` and `plugins` to the `features` array if you need build-time analysis to enable the analysis of loader and plugin timings.
+## No Bundled/Parsed Size for Modules in bundle analysis?
 
-- Add `bundle` to the `features` array if you need bundle analysis to enable the analysis of build artifacts.
+### Issue Description
+
+The difference between `Source Size` and `Bundled Size`:
+
+- **Source Size**: The original size of the Module source code file (marked in cyan in the image below).
+- **Bundled Size**: The final code size of the Module after bundling and minification (marked in blue in the image below).\
+- **Gzip Size**: The final code size of the Module after gzip compression (marked in yellow in the image below).
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/all-in-one-after.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+### Solution
+
+If you only have Source Size but no Bundled Size, or **there is no Module drill-down in Tree Map** (i.e., no Module chunks), you need to **manually enable SourceMap**. **Note: Only enable SourceMap when Rsdoctor is enabled, do not affect production builds.**
 
-The following example enables the lite mode, build-time analysis, and bundle analysis:
+- The following scenario requires manually enabling SourceMap:
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/all-in-one-before.png"
+  width="600px"
+  height="300px"
+  style={{ margin: 'auto' }}
+/>
 
-```js
-const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
+Configuration example:
 
-// adding the plugin to your configuration
-module.exports = {
-  // ...
-  plugins: [
-    new RsdoctorRspackPlugin({
-      disableClientServer: false,
-      features: ['lite', 'loader', 'plugins', 'bundle'],
-    }),
-  ].filter(Boolean),
+```js rspack.config.mjs
+export default {
+  devtool: 'cheap-source-map', // or other devtool configuration
 };
 ```
 
-- Cause: During the build process, the source code information is stored, which exceeds the memory limit. Enabling the `lite` mode can alleviate this issue.
-- Difference: The difference between the **lite mode** and the **normal mode** is that the **lite mode** no longer stores the **source code information**, only the **bundled code** is stored. Additionally, the code displayed in the analysis report will only consist of the **bundled code**.
+Rsdoctor supports the following SourceMap configurations:
+
+- source-map
+- hidden-source-map
+- inline-source-map
+- cheap-source-map
+- cheap-module-source-map
+- nosources-source-map
 
 ## Bundle analysis page no `Bundled Size`?
 
@@ -79,7 +99,7 @@ When [optimization.concatenateModules](https://rspack.rs/config/optimization#opt
 ### Solution
 
 :::danger
-**Important Note:** You must check the `RSDOCTOR` environment variable and not modify ConcatenateModules directly! ConcatenateModules is enabled by default in production environments, and disabling it in production builds will increase the bundle size.
+**Important Note:** You must check the `RSDOCTOR` environment variable and not modify ConcatenateModules directly! ConcatenateModules is enabled by default in production environments. Disabling it in production builds will increase the bundle size.
 :::
 
 When enabling Rsdoctor analysis, set **concatenateModules to false** as shown below. **Note: Disabling `concatenateModules` will slightly increase bundle size, creating differences from production builds.**

package/docs/en/guide/start/action.mdx

@@ -68,7 +68,10 @@ name: Bundle Analysis
 
 on:
   pull_request:
-    types: [opened, synchronize, reopened, closed]
+    types: [opened, synchronize, reopened]
+  push:
+    branches:
+      - main # or your target branch name
 
 jobs:
   bundle-analysis:

package/docs/en/guide/start/intro.mdx

@@ -29,17 +29,17 @@ Rsdoctor supports all tools and frameworks based on Rspack or webpack, such as:
   - Build artifact support for resource lists and module dependencies, etc.
   - Build-time analysis supports Loader, Plugin, and Resolver building process analysis.
   - Build rules support duplicate package detection and ES Version Check, etc.
-- **Support Custom Rules**: In addition to built-in build scan rules, Rsdoctor also supports users adding custom component scan rules based on the build data of Rsdoctor.
+- **Support Custom Rules**: In addition to built-in build scan rules, Rsdoctor also supports users adding custom build scan rules based on Rsdoctor's build data.
 
 ## 🛠️ Introduction
 
 ### ⭐️ Overview
 
-- The overview page (i.e. the home page) can know **project configuration, diagnostic information, compilation information, and product status**.
+- The overview page (i.e., the home page) displays **project configuration, diagnostic information, compilation information, and artifact status**.
 
 ![Overall](https://assets.rspack.rs/others/assets/rsdoctor/project-overall-1.jpg)
 
-- In addition to the project overview, we also provide diagnostic functions, including compilation diagnostics and duplicate packages diagnostics. If your compilation and products hit the diagnostic rules we defined, the corresponding warning alerts will appear on the tool's home page, **where you can see the detailed reference path of duplicate packages**:
+- In addition to the project overview, we also provide diagnostic modules, including compilation diagnostics and duplicate package diagnostics. If your compilation and artifacts match the diagnostic rules we defined, the corresponding warning modules will appear on the tool's home page, **where you can view the detailed reference paths of duplicate packages**:
 
 ![Overall-Alerts](https://assets.rspack.rs/others/assets/rsdoctor/overall-alerts.png)
 
@@ -76,7 +76,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M
 
 #### Resolve analysis
 
-- This module mainly provides path data and estimated time consumption for module resolution in a single file within the project. Rspack does not currently support this module.
+- This module mainly provides path data and estimated time consumption for module resolution in a single file within the project. Rspack temporarily does not support this module.
 
 <p>
   <img
@@ -106,15 +106,15 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M
 
 ### ⭐️ Bundle diff
 
-::: tip
-Support in progress...
-:::
+Using the Bundle Diff function provided by Rsdoctor, you can see the changes in resource size, duplicate packages, Packages, and other data in the artifacts, as well as the size of module files and code changes in each resource.
 
-Using the bundle diff function provided by Rsdoctor, you can see the changes in **the size of resources, duplicate packages, Packages and other data in the product**, as well as **the size of module files and code changes in each resource**.
+> For more information, refer to the [Bundle Diff](/guide/usage/bundle-diff) documentation.
 
 | ![bundle-diff-1](https://assets.rspack.rs/others/assets/rsdoctor/bundle-diff-1.png) | ![bundle-diff-2](https://assets.rspack.rs/others/assets/rsdoctor/bundle-diff-2.png) |
 | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
 
 ## 🧑‍💻 Community
 
-Come and chat with us on [Discord](https://discord.gg/wrBPBT6rkM)! The Rstack team and users are active there, and we're always looking for contributions.
+Welcome to join our [Discord](https://discord.gg/wrBPBT6rkM) channel! The Rstack team and users are active there, and we're always looking for contributions.
+
+You can also join the [Feishu Group](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=3c3vca77-bfc0-4ef5-b62b-9c5c9c92f1b4) to chat with everyone.

package/docs/en/guide/usage/bundle-size.mdx

@@ -1,11 +1,31 @@
 # Bundle analysis
 
-## Introduction
+:::info
+If you want to analyze the reference chain of a specific Module, you can check 👉🏻 [Module Analysis](/guide/usage/module-analysis).
+:::
+
+## ⭐️ Overview
 
 **Rsdoctor** provides the `Bundle Size` module, which is mainly used to analyze the information of the build artifacts of **Webpack** or **Rspack**, including the **size of resources**, **duplicate packages**, and **module reference relationships**:
 
-- **Bundle Overview**: Displays the total number and size of artifacts, as well as the number and size of each file type. It also shows the duplicate packages and their reference chains.
-- **Bundle Analysis Module**: Analyzes the size and code information of the build artifacts (**Assets**) and the included **Modules**. In this module, you can view the **actual code size of modules after packaging** in the Assets, as well as the original code or **packaged code segments** and **module reference relationships**.
+- **Bundle Overview**: Displays the total number of artifacts, the number and size of each file type, as well as duplicate packages and their reference chains, 👉🏻 [**Bundle Overview**](#-bundle-overview).
+- **Bundle Analysis (`Bundle Analysis`) Module**: Analyzes the size and code information of the build artifacts (**Assets**) and the included **Modules**. In this module, you can view the **actual code size of modules after packaging** in the Assets, the original code of modules, **packaged code segments**, and **module reference relationships**.
+
+The **Bundle Analysis** displays two view modes, **Tree Map** and **Tree Graph**:
+
+- 👉🏻 [**Tree Map**](/guide/usage/bundle-size#-tree-map)
+
+Tree Map is a classic build artifact analysis view that helps developers visualize and analyze the composition of bundles more intuitively, as well as the proportion of resources (Assets) and modules (Modules). It also supports searching for module resources, and clicking on module resources can zoom in to that module area.
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap-intro.gif"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+- 👉🏻 [**Tree Graph**](/guide/usage/bundle-size#-tree-graph)
+
+Tree Graph is a **file tree-based** build artifact analysis view that helps developers visualize and analyze the composition of artifacts more intuitively, as well as the proportion of artifacts (Assets) and modules (Modules). It also supports searching for module resources, and clicking on modules can view module details and code.
 
 <img
   src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png"
@@ -13,25 +33,24 @@
   style={{ margin: 'auto' }}
 />
 
-Click on the **"Bundle Size"** option in the navigation bar to view the Bundle analysis report. Please note that to display this page, you need to enable the build artifact analysis capability [features](/config/options/options).
-
-### Glossary
+## 🪐 Glossary
 
-- **`Assets`**: Resources refer to images, fonts, media, and other file types. They are the files that ultimately exist in the output folder. Each Chunk has corresponding [Assets resources](https://webpack.js.org/concepts/under-the-hood/#chunks).
-- **`Module`**: One or more Modules combine to form a Chunk. For more information about Module types, please refer to [Rspack Modules](https://www.rspack.rs/api/modules.html) and [Webpack Modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module).
+- **`Assets`**: Resources are files that ultimately exist in the output folder, including JavaScript, CSS, images, fonts, media, and other file types. Each Chunk has corresponding [Assets resources](https://webpack.js.org/concepts/under-the-hood/#chunks).
+- **`Module`**: Multiple Modules combine to form a Chunk. For more information about Module types, please refer to [Rspack Modules](https://www.rspack.rs/api/modules.html) and [Webpack Modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module).
 - **`Source Size`**: The original size of the file, before any transformations and minification.
 - **`Bundle Size`**: The final output size of the files. If you enabled minification, this value shows the minified size.
+- **`Gzip Size`**: The size of the file after gzip compression.
 - **`Package Count`**: The number of third-party packages.
-- **`Initial Chunk`**: The **initial** chunk is the main chunk of the entry point. This chunk contains all the modules specified by the entry point and their dependencies, unlike the **chunks** for "on-demand loading".
+- **`Initial Chunk`**: **initial (initialization)** is the main Chunk of the entry point. This Chunk contains all the modules specified by the entry point and their dependencies, unlike the **Chunk** resources for "**on-demand loading**".
   - For more information about Initial Chunk, please refer to [Initial Chunk Introduction](https://webpack.js.org/concepts/under-the-hood/#chunks).
 - **`Duplicate Packages`**: Duplicate third-party packages bundled into the project. Excludes third-party packages that are not bundled into the artifact. Please refer to [Duplicate Packages](/guide/usage/bundle-alerts).
-- **`Concatenated Module`**: A concatenated module is a technique that combines multiple modules into one closure during packaging. In the past, Rspack would package each module into a separate closure, and this encapsulation function would cause slower execution of JavaScript in the browser. Optimization can be achieved by enabling the [`optimization.concatenateModules`](https://rspack.rs/misc/glossary#scope-hoisting) parameter.
+- **`Concatenated Module`**: A concatenated module is a technique that combines multiple modules into one closure during packaging. In the past, Webpack would package each module into a separate closure, and this encapsulation function would cause slower execution of JavaScript in the browser. Optimization can be achieved by enabling the [`optimization.concatenateModules`](https://rspack.rs/misc/glossary#scope-hoisting) parameter.
 
-## Bundle overview
+## 🪐 Bundle overview
 
 ### Bundle information card
 
-The bundle overview displays information about the number and size of files, such as `Total Files`. Clicking on the card chart expands the resource details, as shown in the following image:
+The bundle overview displays information about the number and size of files, such as `Total Files`. Clicking on the card expands the resource details, as shown in the following image:
 
 <img
   src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall-1.png"
@@ -48,15 +67,59 @@ The bundle overview displays information about the number and size of files, suc
   style={{ margin: 'auto' }}
 />
 
-- Clicking on the tabs allows you to switch between different resource information views, such as **[Total JS | Initial JS]**. The card also displays the percentage, size, and number of resources. Similarly, clicking on the icon in the lower right corner expands the resource list.
+- Clicking on the tabs allows you to switch between different resource information views, such as **「Total JS | Initial JS」**. The card also displays the percentage, size, and number of resources. Similarly, clicking on the icon in the lower right corner expands the resource list.
 
 ### Duplicate packages
 
-The **Duplicate Packages** card displays the number of duplicate third-party packages in the project. Clicking on the image allows you to view the specific details of the duplicate packages. Please note that these are duplicate packages that have been bundled.
+- The **Duplicate Packages** card displays the number of duplicate third-party packages in the project. Clicking on the image allows you to view the specific details of the duplicate packages. Please note that these are duplicate packages that have been bundled.
 
 For more information, please refer to [Duplicate Packages](/guide/usage/bundle-alerts).
 
-## Bundle analysis
+## 🪐 Tree map
+
+:::info
+If an Asset block has no Module chunks, you need to manually enable SourceMap. Note: Only enable SourceMap when Rsdoctor is enabled, do not affect production builds. [FAQ](/guide/more/faq#no-bundledparsed-size-for-modules-in-bundle-analysis)
+:::
+
+Tree Map view can intuitively display the proportion and relationship between modules, as shown in the following image. Clicking on module resources can zoom in to that module area.
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap-intro.gif"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+- Tree Map view also supports searching for module resources. The left sidebar can filter resources (Assets) and search for modules (Modules). Clicking on the search results for modules can zoom in to that module area.
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap-all.png"
+  width={'700px'}
+  style={{ margin: 'auto' }}
+/>
+
+- Double-clicking on a block can display its Module details card, as shown in the following image. For more information, see [Module Details](/guide/usage/module-analysis).
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap-dbclick.png"
+  width={'700px'}
+  style={{ margin: 'auto' }}
+/>
+
+## 🪐 Tree graph
+
+:::info
+If an Asset block has no Module chunks, you need to manually enable SourceMap. Note: Only enable SourceMap when Rsdoctor is enabled, do not affect production builds. [FAQ](/guide/more/faq#no-bundledparsed-size-for-modules-in-bundle-analysis)
+:::
+
+Tree Graph is a **file tree-based** build artifact analysis view used to analyze the size and code information of build artifact resources (**Assets**) and the included **Modules**. In this module, you can view the **actual code size of modules after packaging** in the Assets, the original code of modules, **packaged code segments**, and **module reference relationships**.
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png"
+  width={'700px'}
+  style={{ margin: 'auto' }}
+/>
+
+Click on the **"Bundle Size"** option in the navigation bar to view the Bundle analysis report. Please note that to display this page, you need to enable the build artifact analysis capability [features](/config/options/options).
 
 ::: tip
 If your project is based on Rspack and the version is lower than 0.5.1, you cannot view code information.
@@ -82,18 +145,9 @@ The top toolbar from left to right includes: the search tool for **Assets**, the
 
 <img src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-analysis-selects.png" />
 
-#### Search module
-
-Search for which Assets the Module is located in. As shown in the figure, you can see the results of matching the search Module keyword.
-
-<img
-  style={{ margin: 'auto', width: 500, height: 400 }}
-  src="https://assets.rspack.rs/others/assets/rsdoctor/search-modules.png"
-/>
-
-#### Search module
+### Search module
 
-The module search functionality is supported, allowing users to click the "**Search Module**" button to open the module search dialog. By entering the module name, users can quickly locate and view the module's position in the Assets, making it easier to analyze the module's reference relationships and size. The search determines which Assets the Module is located in.
+Module search functionality is supported. Users can click the "**Search Module**" button to open the module search dialog. By entering the module name, users can quickly locate and view the module's position in the Assets, making it easier to analyze the module's reference relationships and size.
 
 As shown in the following image, the results of matching the search Module keyword can be seen:
 
@@ -122,7 +176,7 @@ The **Modules** tag is shown in the right image, from left to right representing
 
 - **Bundled Size**
   - The final size of the module bundled into the artifact. Some modules labeled as `concatenated` are concatenated modules, which have a certain impact on this value. Please refer to the explanation of `concatenated module` below.
-- **[Concatenated Module](https://rspack.rs/misc/glossary#scope-hoisting)**: Concatenated modules are modules that are optimized or concatenated into one closure during bundling. There are two types:
+- **[Concatenated Module](https://rspack.rs/misc/glossary#scope-hoisting)**: Concatenated modules combine multiple modules into one closure during bundling. There are two types:
   - One is the concatenated main module, indicating how many `Modules` are concatenated.
   - The other is the concatenated sub-module, indicating which `Module` it is aggregated into. This sub-module cannot be further unpacked after bundling, so the specific `Bundled Size` cannot be determined. Only the size of the entire concatenated module is known, which is marked at the end of the main module.
 - **Module Explorer** tag: Click to open the dependency analysis page between `Modules`.
@@ -130,11 +184,11 @@ The **Modules** tag is shown in the right image, from left to right representing
 
 ### Support for concatenated module analysis
 
-First, **[Concatenated Module](https://rspack.rs/misc/glossary#scope-hoisting)** refers to multiple modules that are merged into a single closure, which cannot be analyzed through AST syntax analysis. However, concatenated modules may contain code from different packages, making the analysis of sub-modules within concatenated modules a key focus, especially for projects using the ["all-in-one"](https://rsbuild.rs/guide/optimization/code-splitting#all-in-one) bundling approach.
+**[Concatenated Module](https://rspack.rs/misc/glossary#scope-hoisting)** refers to multiple modules that are merged into a single closure, which cannot be analyzed through AST syntax analysis. However, concatenated modules may contain code from different packages, making the analysis of sub-modules within concatenated modules a key focus, especially for projects using the ["all-in-one"](https://rsbuild.rs/guide/optimization/code-splitting#all-in-one) bundling approach.
 
 Rsdoctor supports the analyze of **[Concatenated Module](https://rspack.rs/misc/glossary#scope-hoisting)** and accurately calculates the real bundled size of sub-modules within concatenated modules, helping developers accurately identify the actual build size after Tree Shaking, analyze the impact of merged modules on final bundle size, and optimize code splitting strategies.
 
-- **For Rspack projects**, the Rsdoctor native plugin built into Rspack (>=1.4.11) has enhanced sourcemap capabilities, allowing seamless analysis of concatenated modules without enabling source maps.
+- **For Rspack projects**: The Rsdoctor native plugin built into Rspack (>=1.4.11) has enhanced sourcemap capabilities, allowing seamless analysis of concatenated modules without enabling source maps.
 
 > As shown in the figure below, this is the analysis of 'all-in-one' bundling. The first image shows the previous inability to analyze, while the second image shows the analyzable situation.
 
@@ -154,7 +208,7 @@ Rsdoctor supports the analyze of **[Concatenated Module](https://rspack.rs/misc/
   style={{ margin: 'auto' }}
 />
 
-- **For webpack projects**, source maps must be enabled to accurately decompose and analyze concatenated modules, as shown in the following configuration.
+- **For webpack projects**: Source maps must be enabled to accurately decompose and analyze concatenated modules, as shown in the following configuration.
 
 ```js
 export default {
@@ -163,7 +217,7 @@ export default {
 };
 ```
 
-- Rsdoctor supports the following sourcemap configurations for Concatenated Module analysis:
+- Rsdoctor supports the following SourceMap configurations for Concatenated Module analysis:
   - source-map
   - hidden-source-map
   - inline-source-map
@@ -171,37 +225,19 @@ export default {
   - cheap-module-source-map
   - nosources-source-map
 
-### Module details
+## 🪐 Module details
 
 Click the module tag to view module details, as shown below:
 
 <img src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif" />
 
-- **Reasons**: This refers to the reason why a Module exists, i.e., which Modules import this Module. The entire Reasons Tree shows the upstream reference chain of this Module, including both direct and indirect parents. This corresponds to Rspack's `stats.reasons`.
+- **Reasons**: As the name suggests, it means the [reason] why a Module exists. Reasons indicate which Modules import this Module, and the entire Reasons Tree shows the upstream reference chain of this Module, including both direct and indirect parents. This corresponds to Rspack's stats.reasons.
 - **Dependencies**: The Modules that this Module depends on.
-- **Bailout Reason**: The reason why this Module failed Tree Shaking during the build process.
+- **Bailout Reason**: The reason why this Module failed Tree Shaking.
 
 > For more details, see: [Module details](/guide/usage/module-analysis)
 
-## Bundle treemap graph
-
-Click the **"Treemap Graph"** label on the **"Bundle Size"** page to view the treemap. The treemap clearly shows the proportion and relationship between resources and modules, as shown in the following image:
-
-<img
-  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.png"
-  width="500px"
-  style={{ margin: 'auto' }}
-/>
-
-You can also click the 🔍 button on the card title to search for Module resources, click the Module resource, and zoom in to the Module area, as shown in the following image:
-
-<img
-  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.gif"
-  width="500px"
-  style={{ margin: 'auto' }}
-/>
-
-## Supports BannerPlugin
+## 🪐 Supports bannerPlugin
 
 :::danger
 `supports.banner` option is only used for debugging, do not use it in production.
@@ -224,5 +260,3 @@ new RsdoctorRspackPlugin({
   },
 });
 ```
-
-- Note: Enabling `drop_console` will affect Rsdoctor's analysis of the BannerPlugin. Therefore, you can disable `drop_console` when `RSDOCTOR = true`.

package/docs/en/guide/usage/module-analysis.mdx

@@ -1,10 +1,10 @@
-# Module dependency analysis
+# Module analysis
 
 ## Introduction
 
-**Rsdoctor** provides the `Module Imported Chain Analysis` module, which is mainly used to analyze the dependency tree of a specific module, i.e. the modules that depend on it, similar to [Webpack's stats.reasons](https://webpack.js.org/configuration/stats/#statsreasons).
+**Rsdoctor** provides the `Module Reference Chain Analysis` module, which is mainly used to analyze the dependency tree of a specific Module, i.e., which modules depend on it, similar to [Webpack's stats.reasons](https://webpack.js.org/configuration/stats/#statsreasons).
 
-In this section, you can analyze the imported chain of a module. If you have the need to split the package or want to see why a certain module is being imported, you can quickly and clearly locate the reference chain through the `Module Imported Chain Analysis`.
+In this module, you can analyze the `Module` reference chain. If you have the need to split packages or want to see why a certain `Module` is being imported, you can quickly and clearly locate the reference chain through `Module Reference Chain Analysis`.
 
 <img
   src="https://assets.rspack.rs/others/assets/rsdoctor/module-analysis-tree.png"
@@ -14,26 +14,21 @@ In this section, you can analyze the imported chain of a module. If you have the
 
 ### This section's entry
 
-Clicking on an **Assets** in the **[Bundle Size](./bundle-size)** page will display the `「Module Tree」` on the right side. Each **Module** will have the following icon next to it, click on it to view the imported chain of that **Module**.
+After clicking on an **Assets** in the `「Bundle Size」` page, the `「Module Tree」` will be displayed on the right side. Click on the **Module** to view the reference chain relationship diagram of that **Module**.
 
-<img
-  src="https://assets.rspack.rs/others/assets/rsdoctor/module-analysis-entry.png"
-  height="300px"
-  width="440px"
-  style={{ margin: 'auto' }}
-/>
+<img src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif" />
 
 ### Glossary
 
-- **`Reasons`**: As the name suggests, it means the reasons why a `Module` exists. Reasons indicate which other `Module`s import this `Module`, and the entire `Reasons Tree` represents the upstream reference chain of this `Module`, including both direct and indirect parent `Module`s. [Similar to Webpack's stats.reasons.](https://webpack.js.org/configuration/stats/#statsreasons)
+- **`Reasons`**: As the name suggests, it means the `[reason]` why a `Module` exists. Reasons indicate which `Module`s import this `Module`, and the entire `Reasons Tree` represents the upstream reference chain of this `Module`, including both direct and indirect parents. [Similar to Rspack's stats.reasons.](https://webpack.js.org/configuration/stats/#statsreasons)
 - **`Dependencies`**: The `Module`s that this `Module` depends on.
-- **`Bailout Reason`** : The reason why this `Module` failed Tree Shaking.
+- **`Bailout Reason`**: The reason why this `Module` failed Tree Shaking.
 
 ## Reasons dependency tree
 
 ### Introduction
 
-The `Reasons Tree` displays the dependency chain of this `Module`, showing which other `Modules` directly or indirectly import it. In this dependency tree, you can view the `Bundled Size` of the `Modules` along the dependency chain. You can also click the right arrow `>` to navigate to the `Module Dependency Analysis` page for that specific `Module`.
+The `Reasons Tree` displays the dependency chain of this `Module`, showing which other `Modules` directly or indirectly import it. In this dependency tree, you can view the `Bundled Size` of the `Modules` along the dependency chain. You can also click the right arrow `>` to navigate to the `Module Reference Chain Analysis` page for that specific `Module`.
 
 - **Parent-child relationship in the dependency tree**: The parent node file is the one that is depended upon by the child node file and is therefore bundled into the output. Similarly, the grandchild node file is depended upon by the child node and is bundled into the output, and so on.
 
@@ -47,7 +42,7 @@ The `Reasons Tree` displays the dependency chain of this `Module`, showing which
 
 - The `Concatenated` tag:
   - The `Concatenated` tag indicates that the module is a concatenated sub-module. Hover over it to see which main module it is aggregated into. This type of aggregated module cannot be further unpacked, so the specific `Bundled Size` cannot be determined, only the size of the entire concatenated module can be known.
-  - Glossary: A **concatenated module** is when multiple modules are promoted or **concatenated into a closure** during packaging. For an explanation of `Concatenated Module`, refer to the [Glossary](/guide/usage/bundle-size#glossary).
+  - Glossary: A **concatenated module** is when multiple modules are promoted or **concatenated into a closure** during packaging. For an explanation of `Concatenated Module`, refer to the [Glossary](/guide/usage/bundle-size#-glossary).
 
 - The `!` tag, hover over it to display the detailed path of the module.
 

package/docs/zh/guide/more/faq.mdx

@@ -2,7 +2,7 @@
 
 ## 如何只使用 Rsdoctor 的某个功能？
 
-当我们**只需要** Rsdoctor 内 [Bundle Size](../usage/bundle-size) 分析产物大小的功能时，我们可以在接入 Rsdoctor 插件时配置对应的 [Features](/config/options/options) 配置项，参考下方代码：
+当**只需要** Rsdoctor 内的 [Bundle Size](../usage/bundle-size) 分析产物大小功能时，可以在 Rsdoctor 插件配置时添加对应的 [features](/config/options/features) 配置项，参考下方代码：
 
 ```ts
 import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
@@ -14,14 +14,14 @@ new RsdoctorRspackPlugin({
 
 ## Loader 耗时数据不准？
 
-Rsdoctor 提供的 Loader 耗时时间是**预估耗时**，为什么没法统计到准确耗时？是因为我们知道 Loader 执行可能是**异步**函数也可能是**同步**函数，同时，打包工具会**并行执行多个**不冲突的 Loader 函数，其中 **JS 是单线程**的，多个 Loader 函数均可能**抢占当前的任务队列**，同时 Loader 函数内的**异步逻辑没法识别**，导致单个 Loader 函数在执行过程中，**可能横跨**多个其他 Loader 的执行过程，所以会存在如下图所示的三种 case：
+Rsdoctor 提供的 Loader 耗时是**预估耗时**。无法统计到准确耗时是因为 Loader 执行可能是**异步**函数也可能是**同步**函数，打包工具会**并行执行多个**不冲突的 Loader 函数，而 **JavaScript 是单线程**的，多个 Loader 函数均可能**抢占当前的任务队列**，且 Loader 函数内的**异步逻辑无法识别**，导致单个 Loader 函数在执行过程中**可能横跨**多个其他 Loader 的执行过程，因此会存在如下图所示的三种情况：
 
 <img
   src="https://assets.rspack.rs/others/assets/rsdoctor/loader-cases.jpeg"
-  style={{ width: '250px' }}
+  style={{ width: '250px', margin: 'auto' }}
 />
 
-因此，Rsdoctor 提供的 Loader 耗时是一个**预估**的数据，而我们给出的耗时数据适配了上图中 Case 1 和 Case 2 的情况，对于 Case 3 的解决方案，我们目前还在探索中。
+因此，Rsdoctor 提供的 Loader 耗时是一个**预估**的数据，我们给出的耗时数据准确反映了上图中情况 1 和情况 2，对于情况 3 的解决方案，我们目前还在探索中。
 
 ## 使用 `Rsdoctor` 构建时出现了 `out of memory` 问题
 
@@ -29,35 +29,57 @@ Rsdoctor 提供的 Loader 耗时时间是**预估耗时**，为什么没法统
 
 ### 方法一
 
-增大 node 内存上限, 例如：NODE_OPTIONS=--max-old-space-size=8096。
+增大 Node.js 内存上限，例如：`NODE_OPTIONS=--max-old-space-size=8096`。
 
 ### 方法二
 
-可以在 `features` 数组中添加 `lite` 字段，使用 lite 模式，同时，因为 features 为数组时会覆盖掉默认配置，所以：
+这个问题多是因为构建过程中存储了源码信息，超过了内存限制，可以在 `output.reportCodeType` 中配置 `noCode` 或 `noAssetsAndModuleSource` 字段来缓解此问题。[output.reportCodeType](/config/options/output#reportcodetype)
 
-- 如果需要构建时分析，`features` 数组中添加 `loader` 和 `plugins`，是开启 `loader` 和 `plugins` 的耗时分析。
+## 产物分析中，Module 都没有 Bundled/Parsed Size 怎么办？
 
-- 如果需要构建产物分析，`features` 数组中添加 `bundle`，是开启构建产物分析。
+### 问题说明
+
+`Source Size` 和 `Bundled Size` 的区别：
+
+- **Source Size**：Module 文件源码的原始大小（如下图青色标识）。
+- **Bundled Size**：经过打包及压缩后的 Module 的最终代码大小（如下图蓝色标识）。\
+- **Gzip Size**：经过 gzip 压缩后的 Module 的最终代码大小（如下图黄色标识）。
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/all-in-one-after.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+### 解决方案
+
+如果只有 Source Size，没有 Bundled Size，或者 **Tree Map 中没有 Module 下钻**（即没有 Modules 分块），则需要**手动开启 SourceMap**。**注意只在 Rsdoctor 开启时打开 SourceMap，不要影响线上产物**。
 
-下面示例是开启了 lite 模式以及构建时和构建产物分析：
+- 下面情况就需要手动开启 Sourcemap
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/all-in-one-before.png"
+  width="600px"
+  height="300px"
+  style={{ margin: 'auto' }}
+/>
 
-```js
-const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
+配置示例：
 
-// adding the plugin to your configuration
-module.exports = {
-  // ...
-  plugins: [
-    new RsdoctorRspackPlugin({
-      disableClientServer: false,
-      features: ['lite', 'loader', 'plugins', 'bundle'],
-    }),
-  ].filter(Boolean),
+```js rspack.config.mjs
+export default {
+  devtool: 'cheap-source-map', // 或其他 devtool 配置
 };
 ```
 
-- 原因：因为构建过程中，存储了源码信息，超过了内存，所以开启 `lite` 模式可以缓解。
-- 区别：`lite` 模式和普通模式的区别就是不再存储**源码信息**，只存储**打包后的代码**，同时分析报告上的代码也将**只有打包后的代码**。
+Rsdoctor 支持以下 SourceMap 配置：
+
+- source-map
+- hidden-source-map
+- inline-source-map
+- cheap-source-map
+- cheap-module-source-map
+- nosources-source-map
 
 ## 产物分析界面没有 `Bundled Size` 怎么办？
 

package/docs/zh/guide/start/action.mdx

@@ -68,7 +68,10 @@ name: Bundle Analysis
 
 on:
   pull_request:
-    types: [opened, synchronize, reopened, closed]
+    types: [opened, synchronize, reopened]
+  push:
+    branches:
+      - main # 或者其他目标分支
 
 jobs:
   bundle-analysis:

package/docs/zh/guide/start/intro.mdx

@@ -105,12 +105,10 @@ Rsdoctor 支持所有基于 Rspack 或 webpack 的工具和框架，例如：[Do
 
 ### ⭐️ Bundle diff
 
-::: tip
-功能支持中...
-:::
-
 使用 Rsdoctor 提供的 Bundle Diff 功能，可以看到产物内的资源体积、重复包、Packages 等数据的变化以及每个资源中的模块文件的大小及代码的变化。
 
+> 可参考[Bundle Diff](/guide/usage/bundle-diff) 文档了解更多。
+
 | ![bundle-diff-1](https://assets.rspack.rs/others/assets/rsdoctor/bundle-diff-2.png) | ![bundle-diff-2](https://assets.rspack.rs/others/assets/rsdoctor/bundle-diff-1.png) |
 | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
 

package/docs/zh/guide/usage/bundle-size.mdx

@@ -1,11 +1,31 @@
 # 产物分析
 
-## 功能介绍
+:::info
+如果想要分析某个 Module 的引用链路，可以查看 👉🏻[Module 引用链分析](/guide/usage/module-analysis)。
+:::
+
+## ⭐️ 功能概览
 
 **Rsdoctor** 提供了 `Bundle Size` 模块，该模块主要用于分析 **Webpack** 或 **Rspack** 构建产物的信息，包括当前编译产物的**资源大小**、**重复包**、**模块引用关系**等：
 
-- **产物概览**：展示产物总数、各类型文件数目、大小以及占比，以及重复包和重复包的引用链；
-- **产物分析（`Bundle Analysis`）模块**：分析构建产物资源（**Assets**）以及所包含的 **Modules** 的大小和代码信息。在该模块中，可以查看 Assets 中 **Module 打包后的实际代码大小**，以及模块的原始代码或**打包后的代码段**以及**模块引用关系**。
+- **产物概览**：展示产物总数、各类型文件数目、大小以及占比，以及重复包和重复包的引用链，👉🏻 [**产物概览**](#-%E4%BA%A7%E7%89%A9%E6%A6%82%E8%A7%88)
+- **产物分析（`Bundle Analysis`）模块**：分析构建产物资源（**Assets**）以及所包含的 **Modules** 的大小和代码信息。在该模块中，可以查看 Assets 中 **Module 打包后的实际代码大小**、模块的原始代码、**打包后的代码段**以及**模块引用关系**。
+
+其中，**产物分析**展示了两种视图模式，**Tree Map** 和 **Tree Graph**：
+
+- 👉🏻 [**Tree Map**](/guide/usage/bundle-size#-tree-map)
+
+Tree Map 是一种经典的构建产物分析视图，能帮助开发者更直观地可视化并分析 bundle 的构成，以及资源（Assets）和模块（Modules）的占比。同时支持搜索模块资源，点击模块资源可以放大到该模块区域。
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap-intro.gif"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+- 👉🏻 [**Tree Graph**](/guide/usage/bundle-size#-tree-graph)
+
+Tree Graph 是一种**基于文件树形式**的构建产物分析视图，能帮助开发者更直观地可视化并分析产物的构成，以及产物（Assets）和模块（Modules）的占比。同时支持搜索模块资源，点击模块还可以查看模块详情和代码。
 
 <img
   src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png"
@@ -13,25 +33,24 @@
   style={{ margin: 'auto' }}
 />
 
-点击**导航栏 「Bundle Size」-> 「Bundle Size」选项**，即可查看 Bundle 分析报告。请注意，要展示此页面，需要开启构建产物分析能力 [features](/config/options/options)。
+## 🪐 名词解释
 
-### 名词解释
-
-- **`Assets`**：资源是对图像、字体、媒体和其他文件类型的统称，是最终存在于输出文件夹内的文件，同时，每个 Chunk 都有对应的 [Assets 资源](https://webpack.js.org/concepts/under-the-hood/#chunks)。
-- **`Module`**：一个或多个 Module 组合成了 Chunk。有关 Module 类型的详细信息，请参阅 [Rspack Modules](https://www.rspack.rs/api/modules.html) 和 [Webpack Modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module)。
+- **`Assets`**：资源是最终存在于输出文件夹内的文件，包括 JavaScript、CSS、图像、字体、媒体等文件类型。每个 Chunk 都有对应的 [Assets 资源](https://webpack.js.org/concepts/under-the-hood/#chunks)。
+- **`Module`**：多个 Module 组合成了 Chunk。有关 Module 类型的详细信息，请参阅 [Rspack Modules](https://www.rspack.rs/api/modules.html) 和 [Webpack Modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module)。
 - **`Source Size`**：文件的原始大小，未经过任何转换和压缩。
 - **`Bundle Size`**：文件最终输出的大小。如果开启了压缩，这个值代表压缩后的大小。
+- **`Gzip Size`**：文件经过 gzip 压缩后的大小。
 - **`Package Count`**：第三方包的数量。
-- **`Initial Chunk`**: **initial(初始化)** 是入口起点的主 Chunk，该 chunk 包含入口起点指定的所有模块及其依赖项，与「**按需加载**」的 **Chunk** 资源不同。
+- **`Initial Chunk`**: **initial(初始化)** 是入口起点的主 Chunk，该 Chunk 包含入口起点指定的所有模块及其依赖项，与「**按需加载**」的 **Chunk** 资源不同。
   - 有关 Initial Chunk 的详细信息，请参阅 [Initial Chunk 介绍](https://webpack.js.org/concepts/under-the-hood/#chunks)。
 - **`Duplicate Packages`**: 打包到项目中的重复的第三方包。不包括未打包进产物的第三方包，请参阅[重复第三方包](/guide/usage/bundle-alerts)。
-- **`Concatenated Module`**: 串联模块是将多个模块在打包时提升或串联到一个闭包中。在过去，Webpack 在打包时会将每个模块都打包到单独的闭包中，这种封装函数会导致 JavaScript 在浏览器中执行时较慢。可以通过打开 [`optimization.concatenateModules`](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6) 参数来进行优化。
+- **`Concatenated Module`**: 串联模块是将多个模块在打包时提升或串联到一个闭包中。在过去，Webpack 在打包时会将每个模块都打包到单独的闭包中，这种封装函数会导致 JavaScript 在浏览器中执行时较慢。可以通过开启 [`optimization.concatenateModules`](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6) 参数来进行优化。
 
-## 产物概览
+## 🪐 产物概览
 
 ### 产物信息卡
 
-产物概览显示了 `Total Files` 等文件数目和大小信息。点击卡片图表可以展开资源详情，如下图所示：
+产物概览显示了 `Total Files` 等文件数目和大小信息。点击卡片可以展开资源详情，如下图所示：
 
 <img
   src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall-1.png"
@@ -39,7 +58,7 @@
   style={{ margin: 'auto' }}
 />
 
-- 点击详情小图标，右侧会展示对应资源树，标明资源大小：
+- 点击详情图标，右侧会展示对应的资源树，并标明资源大小：
 
 <img
   src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-tree.png"
@@ -56,7 +75,51 @@
 
 更多信息，请参阅[重复第三方包](/guide/usage/bundle-alerts)
 
-## 产物分析
+## 🪐 Tree map
+
+:::info
+如果一个 Asset 区块中没有 Module 分块，则需要手动开启 SourceMap。注意只在 Rsdoctor 开启时打开 SourceMap，不要影响线上产物。[FAQ](/guide/more/faq#%E4%BA%A7%E7%89%A9%E5%88%86%E6%9E%90%E4%B8%ADmodule-%E9%83%BD%E6%B2%A1%E6%9C%89-bundledparsed-size-%E6%80%8E%E4%B9%88%E5%8A%9E)
+:::
+
+Tree Map 视图可以直观展示各个模块之间的占比和关系，如下图所示。点击模块资源可以放大到该模块区域。
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap-intro.gif"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+- Tree Map 视图也支持搜索模块资源，左侧的侧边栏可以过滤资源（Assets）和搜索模块（Modules）。点击模块的搜索结果可以放大到该模块区域。
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap-all.png"
+  width={'700px'}
+  style={{ margin: 'auto' }}
+/>
+
+- 双击某个区块可以展示其 Module 详情卡片，如下图所示。更多信息请参阅 [Module 详情](/guide/usage/module-analysis)。
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap-dbclick.png"
+  width={'700px'}
+  style={{ margin: 'auto' }}
+/>
+
+## 🪐 Tree graph
+
+:::info
+如果一个 Asset 区块中没有 Module 分块，则需要手动开启 SourceMap。注意只在 Rsdoctor 开启时打开 SourceMap，不要影响线上产物。[FAQ](/guide/more/faq#%E4%BA%A7%E7%89%A9%E5%88%86%E6%9E%90%E4%B8%ADmodule-%E9%83%BD%E6%B2%A1%E6%9C%89-bundledparsed-size-%E6%80%8E%E4%B9%88%E5%8A%9E)
+:::
+
+Tree Graph 是一种**基于文件树形式**的构建产物分析视图，用于分析构建产物资源（**Assets**）以及所包含的 **Modules** 的大小和代码信息。在该模块中，可以查看 Assets 中 **Module 打包后的实际代码大小**、模块的原始代码、**打包后的代码段**以及**模块引用关系**。
+
+<img
+  src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png"
+  width={'700px'}
+  style={{ margin: 'auto' }}
+/>
+
+点击导航栏的「Bundle Size」选项，即可查看 Bundle 分析报告。请注意，要展示此页面，需要开启构建产物分析能力 [features](/config/options/options)。
 
 ::: tip
 如果项目基于 Rspack 且版本低于 0.5.1，无法查看代码信息。
@@ -82,11 +145,11 @@
 
 <img src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-analysis-selects.png" />
 
-#### 模块搜索功能
+### 模块搜索功能
 
-支持了模块搜索功能，用户可以通过点击「**Search Module**」按钮，打开模块搜索弹窗。输入模块名称来快速定位和查看模块所在的 Assets，从而更方便地分析模块的引用关系和大小。搜索 Module 位于哪些 Assets 中。
+支持模块搜索功能，用户可以通过点击「**Search Module**」按钮，打开模块搜索弹窗。输入模块名称来快速定位和查看模块所在的 Assets，从而更方便地分析模块的引用关系和大小。
 
-如下图，可以看到匹配搜素 Module 关键字的结果：
+如下图，可以看到匹配搜索 Module 关键字的结果：
 
 <img src="https://assets.rspack.rs/others/assets/rsdoctor/search-modules.png" />
 
@@ -113,7 +176,7 @@
 
 - **Bundled Size**
   - 模块打包进产物的最终大小。一些标有 `concatenated` 的模块是串联模块，对此值有一定影响，请参阅下方的 `concatenated module` 解释。
-- **[Concatenated Module](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6)** 串联模块，串联模块是将多个模块在打包时提升或串联到一个闭包中。有两种类型：
+- **[Concatenated Module](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6)** 串联模块：将多个模块在打包时提升或串联到一个闭包中。有两种类型：
   - 一种是串联主模块，标明串联了多少个 `Modules`；
   - 另一种是被串联的子模块，标明被聚合到了哪个 `Module` 内。这种子模块无法继续拆解打包后的代码，因此无法得知具体的 `Bundled Size`，只能得知整个串联模块的大小，该大小标注在主模块尾部。
 - **Module Explorer** 标签：点击可打开 `Module` 之间的依赖关系分析页面。
@@ -121,11 +184,11 @@
 
 ### 支持 concatenated module 分析
 
-首先，**[Concatenated Module](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6)** 是多个 Modules 被合并在了一个闭包中，无法通过 AST 语法分析拆解，但 concatenated module 中可能包含不同 Package 的代码，分析 concatenated module 内部子 Modules 也成为了重点，尤其是采用 ["all-in-one"](https://rsbuild.rs/guide/optimization/code-splitting#all-in-one) 方式打包的项目。
+**[Concatenated Module](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6)** 是多个 Modules 被合并在了一个闭包中，无法通过 AST 语法分析拆解。但 concatenated module 中可能包含不同 Package 的代码，分析 concatenated module 内部子 Modules 也成为了重点，尤其是采用 ["all-in-one"](https://rsbuild.rs/guide/optimization/code-splitting#all-in-one) 方式打包的项目。
 
 Rsdoctor 支持了对 **[Concatenated Module](https://rspack.rs/zh/misc/glossary#scope-hoisting-%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%90%88%E5%B9%B6)** 的拆解并精确计算 concatenated module 中子 modules 的真实的打包后的体积，帮助开发者准确识别 Tree Shaking 后的实际构建体积，分析合并模块对最终 bundle 大小的影响以及优化分包策略。
 
-- **Rspack 项目**，Rspack（>=1.4.11）内部的 Rsdoctor native 插件也增强了 sourcemap 相关能力，可以在不开启 source map 的情况下，无痛分析 concatenate module。
+- **Rspack 项目**：Rspack（>=1.4.11）内部的 Rsdoctor native 插件增强了 sourcemap 相关能力，可以在不开启 source map 的情况下，无痛分析 concatenate module。
 
 > 可以看到下图，是 'all-in-one' 的打包分析，上图为之前无法分析的情况，下图为可分析情况
 
@@ -145,7 +208,7 @@ Rsdoctor 支持了对 **[Concatenated Module](https://rspack.rs/zh/misc/glossary
   style={{ margin: 'auto' }}
 />
 
-- **webpack 项目**，则需要开启 sourcemap，才可以准确拆解并分析 concatenated module，如下配置。
+- **webpack 项目**：需要开启 sourcemap，才可以准确拆解并分析 concatenated module，配置如下。
 
 ```js
 export default {
@@ -162,47 +225,29 @@ export default {
   - cheap-module-source-map
   - nosources-source-map
 
-### Module 详情
+## 🪐 Module 详情
 
 点击模块标签，可以查看模块详情，如下图所示：
 
 <img src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif" />
 
-- Reasons : 顾名思义是 [原因] 的意思，即某个 Module 存在的原因。Reasons 就是该 Module 被哪些 Module 们引入，而整个 Reasons Tree 就是这个 Module 的整个上游引用链，包括了直接父级和间接父级们。即 Rspack 的 stats.reasons。
-- Dependencies : 是该 Module 依赖了哪些 Module。
-- Bailout Reason : Tree shaking 时，该 Module Tree shaking 失败的原因。
+- **Reasons**：顾名思义是 [原因] 的意思，即某个 Module 存在的原因。Reasons 就是该 Module 被哪些 Module 引入，而整个 Reasons Tree 就是这个 Module 的整个上游引用链，包括直接父级和间接父级。即 Rspack 的 stats.reasons。
+- **Dependencies**：是该 Module 依赖了哪些 Module。
+- **Bailout Reason**：Tree shaking 时，该 Module Tree shaking 失败的原因。
 
 > 更多可查看详情：[Module 详情](/guide/usage/module-analysis)
 
-## 产物总览瓦片图
-
-点击 **「Bundle Size」** 页面的 **「Treemap Graph」** 标签，可以查看瓦片图。通过瓦片图可以清晰的看到各个资源和模块之间的占比和关系，如下图所示：
-
-<img
-  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.png"
-  width="500px"
-  style={{ margin: 'auto' }}
-/>
-
-同时可以点击卡片标题侧的 🔍 按钮，搜索 Module 资源，点击 Module 资源，可以放大到该 Module 区域，如下图所示：
-
-<img
-  src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.gif"
-  width="500px"
-  style={{ margin: 'auto' }}
-/>
-
-## 支持 BannerPlugin
+## 🪐 支持 BannerPlugin
 
 :::danger
 `supports.banner` 选项仅用于调试，请勿将其用于生产。
 :::
 
-由于 Rspack 和 webpack 都支持 [BannerPlugin](https://www.rspack.rs/plugins/webpack/banner-plugin#bannerplugin)，BannerPlugin 是可在生成的 chunk 顶部或尾部添加一段指定的内容的内置插件。
+由于 Rspack 和 webpack 都支持 [BannerPlugin](https://www.rspack.rs/plugins/webpack/banner-plugin#bannerplugin)，BannerPlugin 是一个可在生成的 chunk 顶部或尾部添加指定内容的内置插件。
 
 添加的代码段将会影响到对 Bundle 的解析能力。
 
-Rsdoctor 兼容了对 BannerPlugin 这种添加代码的逻辑，但因为 Rsdoctor 需要添加标记代码，所以没有默认开启，以下两种情况会开启 Rsdoctor BannerPlugin 能力：
+Rsdoctor 兼容了 BannerPlugin 这种添加代码的逻辑，但因为 Rsdoctor 需要添加标记代码，所以没有默认开启。以下两种情况会开启 Rsdoctor BannerPlugin 能力：
 
 1. 项目在 `rspack.config.(js|ts)` 或 `webpack.config.(js|ts)` 中使用了 BannerPlugin；
 
@@ -215,5 +260,3 @@ new RsdoctorRspackPlugin({
   },
 });
 ```
-
-- 注：如果开启了 `drop_console` 将会影响 Rsdoctor 对 BannerPlugin 的分析，所以可以在 `RSDOCTOR = true` 时，关闭 `drop_console`。

package/docs/zh/guide/usage/module-analysis.mdx

@@ -14,16 +14,9 @@
 
 ### 入口
 
-`「Bundle Size」` 页面中点击某个 **Assets** 后右侧会显示 `「Module 树」`，**Module** 后面会有跟着如下红框内图标，点击即可查看该 **Module** 的引用链关系图。
+`「Bundle Size」` 页面中点击某个 **Assets** 后右侧会显示 `「Module 树」`，点击该 **Module** 即可查看该 **Module** 的引用链关系图。
 
-{' '}
-
-<img
-  src="https://assets.rspack.rs/others/assets/rsdoctor/module-analysis-entry.png"
-  height="300px"
-  width="440px"
-  style={{ margin: 'auto' }}
-/>
+<img src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif" />
 
 ### 名词解释
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/docs",
-  "version": "1.3.16",
+  "version": "1.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/web-infra-dev/rsdoctor",
@@ -18,8 +18,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@rspress/plugin-algolia": "2.0.0-rc.1",
-    "@rspress/plugin-llms": "2.0.0-rc.1",
+    "@rspress/plugin-algolia": "2.0.0-rc.3",
+    "@rspress/plugin-llms": "2.0.0-rc.3",
     "@rspress/plugin-rss": "2.0.0-rc.0",
     "@types/node": "^22.8.1",
     "@types/react": "^18.3.27",
@@ -33,13 +33,13 @@
     "rspress-plugin-sitemap": "^1.2.1",
     "typescript": "^5.9.2",
     "@rsbuild/plugin-sass": "^1.4.0",
-    "@rsdoctor/types": "1.3.16"
+    "@rsdoctor/types": "1.4.0"
   },
   "dependencies": {
-    "@rstack-dev/doc-ui": "1.12.0",
+    "@rstack-dev/doc-ui": "1.12.2",
     "clsx": "^2.1.1",
     "react-markdown": "^9.1.0",
-    "@rspress/core": "2.0.0-rc.1"
+    "@rspress/core": "2.0.0-rc.3"
   },
   "scripts": {
     "dev": "cross-env RSPRESS_PERSIST_CACHE=false rspress dev",