web-infra-dev · easy1090 · Jan 17, 2024 · Jan 17, 2024 · Jan 17, 2024
diff --git a/document/docs/en/guide/_meta.json b/document/docs/en/guide/_meta.json
@@ -13,5 +13,10 @@
     "type": "dir",
     "name": "topic",
     "label": "Topic"
+  },
+  {
+    "type": "dir",
+    "name": "more",
+    "label": "More"
   }
 ]
diff --git a/document/docs/en/guide/more/faq.mdx b/document/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 feature of Rsdoctor, we can configure the corresponding [Features](/config/options/index) option when integrating the Rsdoctor plugin. Refer to the code snippet below:
+When we **only need** the [bundle size analysis](../usage/bundle-size) feature of Rsdoctor, we can configure the corresponding [Features](/config/options/index) option when integrating the Rsdoctor plugin. Refer to the code snippet below:
 
 ```ts
 import { RsdoctorWebpackPlugin } from "@rsdoctor/webpack-plugin";

diff --git a/document/docs/en/guide/start/features.mdx b/document/docs/en/guide/start/features.mdx
@@ -30,7 +30,7 @@ Here you can learn about the main features supported by Rsdoctor.
 |------|------|------|
 | Bundle Overview | View information about the artifacts built for the current project | [Bundle Overall](../usage/bundle-overall)  |
 | Bundle Alert | The ability to perform detection based on build artifact data | [Bundle Alert](../usage/bundle-alerts)  |
-| 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 | 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 | - |
 | Duplicate Package Optimization | Inspection of duplicate dependencies used in the project | - |
 | Bundle Diff | Comparative analysis of two artifacts | Planned support |
diff --git a/document/docs/en/guide/usage/_meta.json b/document/docs/en/guide/usage/_meta.json
@@ -1 +1 @@
-["project-overall","bundle-overall", "compile-overall", "compile-alerts", "bundle-alerts", "loaders-timeline", "loaders-analysis", "plugins-analysis", "resolver"]
+["project-overall","bundle-overall", "compile-overall", "compile-alerts", "bundle-alerts", "loaders-timeline", "loaders-analysis", "plugins-analysis", "bundle-size", "resolver"]
diff --git a/document/docs/en/guide/usage/bundle-size.mdx b/document/docs/en/guide/usage/bundle-size.mdx
@@ -0,0 +1,99 @@
+# Bundle Analysis
+
+## Function Introduction
+
+**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' resources (**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**.
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/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/index). 
+
+### 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.dev/api/modules.html) and [Webpack Modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module).
+- **`Bundle Size`**: The final packaged size of the resource artifact, which is the final size after being processed by the builder.
+- **`Module Bundled Source & Size`**: **Module Parsed Source** refers to the final code fragment of the **Module** in the packaged artifact, and **Module Parsed Size** refers to the size of the final code fragment of the **Module** in the packaged artifact.
+- **`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".
+  - 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, 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://webpack.js.org/plugins/module-concatenation-plugin/#root) parameter.
+
+## 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:
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-overall-1.png" width={'700px'} style={{ margin: 'auto' }} />
+
+- Clicking on the details icon displays the corresponding resource tree on the right, indicating the resource sizes:
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-tree.png" width={'300px'} height={'400px'}  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.
+
+### 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.
+
+For more information, please refer to [Duplicate Packages](/guide/usage/bundle-alerts).
+
+## Bundle Analysis
+
+::: tip
+If your project is based on Rspack and the version is lower than 0.5.1, you cannot view code information.
+:::
+
+### Resource and Module Relationship Display
+
+The **Bundle Analysis** module is used to analyze the size and code information of the build artifacts' resources (**Assets**) and the included **Modules**. The example image is shown below:
+
+- On the left side is the list of **Assets** resources, sorted in descending order by resource size. You can click the **"expand all"** button to expand all nodes.
+- On the right side is the list of **Modules** corresponding to the **Assets**, also sorted in descending order by module size after packaging.
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-analysis-tree.png" />
+
+### Search and Filter Box
+
+The top toolbar from left to right includes: the search tool for **Assets**, the filter tool for **Assets** size, and the filter tool for **Module** size.
+
+- **Search Entry Input Box**: Enter the keyword of an **Entry** in the input box to search for the corresponding **Entry** and display only the related **Assets**.
+- **Search Assets Input Box**: Enter the keyword of an **Assets** in the input box to search for the corresponding **Assets**.
+- **Assets Size Filter Tool**: Enter a number with units of KB or MB to filter out **Assets** resources smaller than the specified size.
+- **Module Size Filter Tool**: Enter a number with units of KB or MB to filter out **Module** resources smaller than the specified size.
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-analysis-selects.png" />
+
+### Module Tag Explanation
+
+The **Assets** tag is shown in the left image, from left to right representing: **Resource Size**, **[Initial Chunk](https://webpack.js.org/concepts/under-the-hood/#chunks)**, and **Code View**.
+
+<div style={{ display: "flex" }}>
+  <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-assets-tags.png" height='200px' width='360px' style={{"margin": 'auto' }} />
+  <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-modules-tags.png" height='300px' width='440px' style={{"margin": 'auto'}} />
+</div>
+
+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://webpack.js.org/plugins/module-concatenation-plugin/#root)**: Concatenated modules are modules that are optimized or concatenated 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`.
+  - **Code View** tag: Click to expand code segments, including `Source` (source code), `Transformed` (compiled code), and `Bundled` (bundled code).
+
+{/* 
+// TODO:
+:::tip
+- `Transformed`（编译后代码）默认未开启。需要配置 'All'
+:::: */}
+
+## Bundle Overview Tile Graph
+
+Click the **"Bundle Analyzer Graph"** button on the **"Bundle Size"** page to view the classic tile graph.
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-tile-graph.png" width='500px' style={{"margin": 'auto' }} />
diff --git a/document/docs/en/guide/usage/loaders-analysis.mdx b/document/docs/en/guide/usage/loaders-analysis.mdx
@@ -2,6 +2,8 @@
 
 **Rsdoctor** provides the `Loader Analysis` module, which mainly provides statistics on Loaders at the **directory and file level**. It helps you analyze the compilation of **folders** and **individual files** by Loaders.
 
+Click on the navigation bar **"Compile Analysis"** -> **"Loader Analysis"** option to view the compilation analysis report. Of course, this page will only display the features if the `loader` analysis capability is enabled [features](/config/options/index).
+
 ## Overview
 
 Firstly, in this module, you can directly see the file tree structure of all files processed by Loaders, as shown in the following image:

diff --git a/document/docs/en/guide/usage/loaders-timeline.mdx b/document/docs/en/guide/usage/loaders-timeline.mdx
@@ -2,7 +2,7 @@
 
 ## Overview
 
-In the **Rsdoctor** `Loaders` submenu, specifically in the `Loaders Timeline`, we can see the **execution timeline** of all the loaders in the current project. The content is shown in the following image:
+By clicking on the "Compile Analysis" -> "Loader Analysis" option in the navigation bar of **Rsdoctor**, we can see the **execution timeline** of all loaders in the current project. Please note that this page requires the `loader` analysis capability to be enabled in order to display the [features](/config/options/index). The content of this page is shown in the following image:
 
 <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-overall.png" width="700" style={{"margin": 'auto'}} />
 

diff --git a/document/docs/zh/guide/more/faq.mdx b/document/docs/zh/guide/more/faq.mdx
@@ -2,7 +2,7 @@
 
 ## 如何只使用 Rsdoctor 的某个功能？
 
-当我们**只需要** Rsdoctor 内 [Bundle Size]() {/* TODO: link */} 分析产物大小的功能时，我们可以在接入 Rsdoctor 插件时配置对应的 [Features](/config/options/index) 配置项，参考下方代码：
+当我们**只需要** Rsdoctor 内 [Bundle Size](../usage/bundle-size) 分析产物大小的功能时，我们可以在接入 Rsdoctor 插件时配置对应的 [Features](/config/options/index) 配置项，参考下方代码：
 
 ```ts
 import { RsdoctorWebpackPlugin } from "@rsdoctor/webpack-plugin";

diff --git a/document/docs/zh/guide/start/features.mdx b/document/docs/zh/guide/start/features.mdx
@@ -29,7 +29,7 @@
 | --------- | ------------------------------------------------------------ | -------- |
 | 产物概览  | 查看当前项目构建产物的信息               | [产物概览](../usage/bundle-overall) |
 | 产物预警  | 基于构建产物数据做检测的能力             | [产物预警](../usage/bundle-alerts) |
-| 产物分析  | 产物中 assets、chunks、modules 关系分析，以及每个 module 打包代码及大小分析等 | -        |
+| 产物分析  | 产物中 assets、chunks、modules 关系分析，以及每个 module 打包代码及大小分析等 | [产物分析](../usage/bundle-size)       |
 | 模块分析  | Modules 依赖关系分析                                         | -        |
 | 重复包优化 | 检查项目使用的依赖包的重复情况                               | -        |
 | Bundle Diff | 两份产物对比分析                                             | 计划支持 |
diff --git a/document/docs/zh/guide/usage/_meta.json b/document/docs/zh/guide/usage/_meta.json
@@ -1 +1 @@
-["project-overall", "bundle-overall", "compile-overall", "compile-alerts", "bundle-alerts", "loaders-timeline", "loaders-analysis", "plugins-analysis", "resolver"]
+["project-overall", "bundle-overall", "compile-overall", "compile-alerts", "bundle-alerts", "loaders-timeline", "loaders-analysis", "plugins-analysis", "bundle-size", "resolver"]
diff --git a/document/docs/zh/guide/usage/bundle-alerts.mdx b/document/docs/zh/guide/usage/bundle-alerts.mdx
@@ -6,8 +6,8 @@
 
 - `Duplicate Packages` 卡片上展示了项目重复第三方包数目。点击图片可以查看重复第三方包的具体详情。注：这里的第三方都是被打包的第三方包。
 <div style={{ display: "flex" }}>
-  <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alters-1.png" width='360px' style={{"margin": 'auto' }} />
-  <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alters-2.png" width='360px' style={{"margin": 'auto'}} />
+  <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alters-1.png" height='200px' width='360px' style={{"margin": 'auto' }} />
+  <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alters-2.png" height='300px' width='440px' style={{"margin": 'auto'}} />
 </div>
 
 - 重复包预警卡片

diff --git a/document/docs/zh/guide/usage/bundle-overall.mdx b/document/docs/zh/guide/usage/bundle-overall.mdx
@@ -35,10 +35,11 @@
 
 
 ### duplicate packages
-{/* TODO:: add link */}
 
 如果卡片中的 `duplicate packages` 显示的数字大于 0，则可以**点击来查看对应的重复包详情列表**，其内容如下图所示：
 
 <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/bundle-overall-dup-pkg.jpg" width='600px' style={{"margin": 'auto'}} />
 
 我们可以看到当前 Rsdoctor 在本次构建产物中检测出来的所有重复包的列表。
+
+更多请查看[重复第三方包](/guide/usage/bundle-alerts)。
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		["project-overall","bundle-overall", "compile-overall", "compile-alerts", "bundle-alerts", "loaders-timeline", "loaders-analysis", "plugins-analysis", "resolver"]
		["project-overall","bundle-overall", "compile-overall", "compile-alerts", "bundle-alerts", "loaders-timeline", "loaders-analysis", "plugins-analysis", "bundle-size", "resolver"]
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		["project-overall", "bundle-overall", "compile-overall", "compile-alerts", "bundle-alerts", "loaders-timeline", "loaders-analysis", "plugins-analysis", "resolver"]
		["project-overall", "bundle-overall", "compile-overall", "compile-alerts", "bundle-alerts", "loaders-timeline", "loaders-analysis", "plugins-analysis", "bundle-size", "resolver"]