@rsdoctor/docs 1.0.0-beta.2 → 1.0.0-rc.0

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

@@ -24,11 +24,11 @@
 
 - The overview page (i.e. the home page) can know **project configuration, diagnostic information, compilation information, and product status**.
 
-![Overall](https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/overall.jpg)
+![Overall](https://assets.rspack.dev/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**:
 
-![Overall-Alerts](https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/overall-alerts.jpg)
+![Overall-Alerts](https://assets.rspack.dev/others/assets/rsdoctor/overall-alerts.png)
 
 ### ⭐️ Compilation analysis
 
@@ -38,18 +38,15 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M
 
 - This module mainly provides the function of data analysis such as input and output, estimated time consumption, and parameters within Rspack / Webpack Loaders.
 
-<div style={{ display: 'flex' }}>
-  <img
-    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-overall.png"
-    width="55%"
-    style={{ margin: 'auto' }}
-  />
-  <img
-    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-anlaysis-all.png"
-    width="45%"
-    style={{ margin: 'auto' }}
-  />
-</div>
+<img
+  src="https://assets.rspack.dev/others/assets/rsdoctor/loader-timeline-overall.png"
+  style={{ margin: 'auto' }}
+/>
+
+<img
+  src="https://assets.rspack.dev/others/assets/rsdoctor/loader-analysis-all.png"
+  style={{ margin: 'auto' }}
+/>
 
 #### Plugin analysis
 
@@ -58,9 +55,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M
 <p>
   <img
     alt="bundle"
-    src={
-      'https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/compile-plugin.jpg'
-    }
+    src={'https://assets.rspack.dev/others/assets/rsdoctor/compile-plugin.jpg'}
     width="600px"
     style={{ margin: 'auto' }}
   />
@@ -73,9 +68,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M
 <p>
   <img
     alt="bundle"
-    src={
-      'https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/resolver.jpeg'
-    }
+    src={'https://assets.rspack.dev/others/assets/rsdoctor/resolver.png'}
     width="700px"
     style={{ margin: 'auto' }}
   />
@@ -91,7 +84,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M
   <img
     alt="bundle"
     src={
-      'https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/bundle-size.jpg'
+      'https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-overall.png'
     }
     width="700px"
     style={{ margin: 'auto' }}
@@ -106,8 +99,8 @@ Support in progress...
 
 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**.
 
-| ![bundle-diff-1](https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/bundle-diff-2.png) | ![bundle-diff-2](https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/bundle-diff-1.png) |
-| ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| ![bundle-diff-1](https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-1.png) | ![bundle-diff-2](https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-2.png) |
+| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
 
 ## 🧑‍💻 Community
 

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

@@ -1,4 +1,4 @@
-## Step 2: Register plugin
+## Step 2: register plugin
 
 After the dependency installation, you need to integrate the Rsdoctor plugin into your project. Below are some examples of common tools and frameworks:
 
@@ -141,7 +141,7 @@ export default defineConfig({
 
 ---
 
-## Step 3: Run build
+## Step 3: run build
 
 Now, you can run the **build** command in the project. After the build is complete, Rsdoctor will automatically open the analysis page of this build.
 

package/docs/en/guide/start/quick-start.mdx

@@ -2,7 +2,7 @@
 
 This document will explain how to access the Rsdoctor ability.
 
-## Step 1: Install dependencies
+## Step 1: install dependencies
 
 import { PackageManagerTabs } from '@theme';
 
@@ -15,10 +15,10 @@ For projects based on Rspack or Rsbuild, install the following dependencies:
 ### Webpack projects
 
 :::tip
-Not supported in Webpack 4.
+Rsdoctor only supports webpack >= 5.
 :::
 
-For projects based on Webpack, install the following dependencies:
+For projects based on webpack, install the following dependencies:
 
 <PackageManagerTabs command="add @rsdoctor/webpack-plugin -D" />
 

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

@@ -1,10 +1,10 @@
-# Bundle Alerts
+# Bundle alerts
 
 ## Introduction
 
 The `Alerts` section in the `Overall` page is used to display the results of "Build Rules" and "Compilation Rules", as shown in the image below. In addition to being displayed on the page, the rules will also be displayed in the terminal log.
 
-<img src="/bundle-alerts.png" />
+<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-alerts.png" />
 
 You can check the built-in rules for bundle alerts below to understand the details of each rule.
 

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

@@ -21,7 +21,7 @@ First, you need to prepare **2 copies** of the [manifest.json](/config/options/t
 
 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" />
+<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff.png" />
 
 ## User guide
 
@@ -77,13 +77,13 @@ At the top of the page, we can see many data points composed of different cards,
 - **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" />
+<img src="https://assets.rspack.dev/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" />
+<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-all.png" />
 
 #### Assets
 
@@ -93,17 +93,17 @@ When displaying Asset names, Rsdoctor tries to remove the hash values from the b
 
 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" />
+<img src="https://assets.rspack.dev/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 "***"`), 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" />
+<img src="https://assets.rspack.dev/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" />
+<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-select-assets.png" />
 
 #### Modules
 
@@ -113,7 +113,7 @@ The `New` / `Deleted` / `Changed` tags indicate whether the module is newly adde
 
 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" />
+<img src="https://assets.rspack.dev/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.
 
@@ -122,10 +122,10 @@ On the right side of the list items, you can view the module code changes by cli
 - **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" />
+<img src="https://assets.rspack.dev/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" />
+<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-packages.png" />

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

@@ -5,7 +5,7 @@
 On the homepage of **Rsdoctor**, we can see a card called `Bundle Overall`, which provides information about the **build artifacts** of the current project. The content is shown in the following image:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/bundle-overall-1.jpg"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-overall-1.png"
   width="400px"
   height="500px"
   style={{ margin: 'auto' }}
@@ -36,7 +36,7 @@ On the homepage of **Rsdoctor**, we can see a card called `Bundle Overall`, whic
   - **Initial:** Refers to the Chunk being the main chunk of the entry.
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/bundle-overall-files.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-overall-files.png"
   width="400px"
   height="600px"
   style={{ margin: 'auto' }}
@@ -47,7 +47,7 @@ On the homepage of **Rsdoctor**, we can see a card called `Bundle Overall`, whic
 If the `Duplicate Packages` number on the card is greater than 0, you can **click to view the details of the duplicate packages**. The content is shown in the following image:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/bundle-overall-dup-pkg.jpg"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-overall-dup-pkg.png"
   width="600px"
   style={{ margin: 'auto' }}
 />

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

@@ -8,7 +8,7 @@
 - **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"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-overall.png"
   width={'700px'}
   style={{ margin: 'auto' }}
 />
@@ -19,7 +19,7 @@ Click on the **"Bundle Size"** option in the navigation bar to view the Bundle a
 
 - **`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.
+- **`Bundle Size`**: The final packaged size of the resource artifact, which is the final size after being processed by the bundler.
 - **`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".
@@ -34,7 +34,7 @@ Click on the **"Bundle Size"** option in the navigation bar to view the Bundle a
 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"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-overall-1.png"
   width={'700px'}
   style={{ margin: 'auto' }}
 />
@@ -42,7 +42,7 @@ The bundle overview displays information about the number and size of files, suc
 - 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"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-tree.png"
   width={'300px'}
   height={'400px'}
   style={{ margin: 'auto' }}
@@ -69,7 +69,7 @@ The **Bundle Analysis** module is used to analyze the size and code information
 - 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" />
+<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-analysis-tree.png" />
 
 ### Search and filter box
 
@@ -80,7 +80,24 @@ The top toolbar from left to right includes: the search tool for **Assets**, the
 - **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" />
+<img src="https://assets.rspack.dev/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.dev/others/assets/rsdoctor/search-modules.png"
+/>
+
+#### 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.
+
+As shown in the following image, the results of matching the search Module keyword can be seen:
+
+<img src="https://assets.rspack.dev/others/assets/rsdoctor/search-modules.png" />
 
 ### Module tag explanation
 
@@ -88,15 +105,15 @@ The **Assets** tag is shown in the left image, from left to right representing:
 
 <div style={{ display: 'flex' }}>
   <img
-    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-assets-tags.png"
+    src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-assets-tags.png"
     height="200px"
-    width="360px"
+    width="260px"
     style={{ margin: 'auto' }}
   />
   <img
-    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-modules-tags.png"
+    src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-modules-tags.png"
     height="300px"
-    width="440px"
+    width="340px"
     style={{ margin: 'auto' }}
   />
 </div>
@@ -116,7 +133,7 @@ The **Modules** tag is shown in the right image, from left to right representing
 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"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-tile-graph.png"
   width="500px"
   style={{ margin: 'auto' }}
 />
@@ -132,17 +149,16 @@ The added code segment will affect the analysis capability of the bundle.
 
 Rsdoctor is compatible with the logic of adding code using the BannerPlugin, but it is not enabled by default because Rsdoctor needs to add tag code. The Rsdoctor BannerPlugin capability is enabled in the following two cases:
 
-1. The project uses the BannerPlugin in `rspack.config.j|ts` or `webpack.config.j|ts`.
+1. The project uses the BannerPlugin in `rspack.config.(js|ts)` or `webpack.config.(js|ts)`.
 
 2. Enable Rsdoctor BannerPlugin capability through Rsdoctor options by setting `supports.banner`:
 
 ```ts
-new RsdoctorRspackPlugin (
+new RsdoctorRspackPlugin({
   supports: {
-    banner: true
-  }
-)
-
+    banner: true,
+  },
+});
 ```
 
 - 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/compile-alerts.mdx

@@ -1,8 +1,8 @@
-# Compile Alerts
+# Compile alerts
 
 We have integrated some capabilities based on compilation data detection. If the current compilation result contains data that hits the rules we define, the `Compile Alerts` module will appear at the bottom of the **Rsdoctor** main interface, as shown in the image below:
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/compile-alerts.png" />
+<img src="https://assets.rspack.dev/others/assets/rsdoctor/compile-alerts.png" />
 
 This module allows us to visually see some warning information about our project's compilation, which can help us further optimize the project's compilation performance.
 

package/docs/en/guide/usage/compile-overall.mdx

@@ -5,7 +5,7 @@
 On the homepage of **Rsdoctor**, there is a card called `Compile Overall` that provides information about the **compilation process** of the current project. The content is shown in the following image:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-1.jpg"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/compile-overall-1.jpg"
   width="400px"
   height="600px"
   style={{ margin: 'auto' }}
@@ -19,12 +19,12 @@ For each compilation phase, if the time data is displayed in <u>blue</u>, it mea
 
 The following table explains the meaning and code implementation of each phase in the card:
 
-| Phase Name                               | Description                                                                                 | Code Implementation                                                                                                                                                                                                              |
-| ---------------------------------------- | ------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <b><i>Bootstrap -> BeforeCompile</i></b> | Represents the time taken from project startup to before compilation starts                 | <ul><li>In `Webpack` or `Rspack` projects: Reports [process.uptime()](https://nodejs.org/dist/latest-v18.x/docs/api/process.html#processuptime) as the <b>duration</b> when **compiler.hooks.beforeCompile** is called</li></ul> |
-| <b><i>Compile</i></b>                    | Represents the total time taken for the project compilation                                 | <ul><li>In `Webpack` or `Rspack` projects: The <b>start time</b> is the time when **compiler.hooks.beforeCompile** is called, and the <b>end time</b> is the time when **compiler.hooks.afterCompile** is called</li></ul>       |
-| <b><i>AfterCompile -> Done</i></b>       | Represents the time taken from compilation completion to the end of the entire process      | <ul><li>In `Webpack` or `Rspack` projects: The <b>start time</b> is the time when **compiler.hooks.afterCompile** is called, and the <b>end time</b> is the time when **compiler.hooks.done** is called</li></ul>                |
-| <b><i>Minify</i></b>                     | Represents the time taken for file compression during the compilation process in most cases | <ul><li>In `Webpack` or `Rspack` projects: Calculates the sum of the time taken for each call of **compilation.hooks.optimizeChunkAssets** and **compilation.hooks.processAssets**</li></ul>                                     |
+| Phase Name                               | Description                                                                                 | Code Implementation                                                                                                                                                                           |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <b><i>Bootstrap -> BeforeCompile</i></b> | Represents the time taken from project startup to before compilation starts                 | <ul><li>Reports [process.uptime()](https://nodejs.org/dist/latest-v22.x/docs/api/process.html#processuptime) as the <b>duration</b> when **compiler.hooks.beforeCompile** is called</li></ul> |
+| <b><i>Compile</i></b>                    | Represents the total time taken for the project compilation                                 | <ul><li>The <b>start time</b> is the time when **compiler.hooks.beforeCompile** is called, and the <b>end time</b> is the time when **compiler.hooks.afterCompile** is called</li></ul>       |
+| <b><i>AfterCompile -> Done</i></b>       | Represents the time taken from compilation completion to the end of the entire process      | <ul><li>The <b>start time</b> is the time when **compiler.hooks.afterCompile** is called, and the <b>end time</b> is the time when **compiler.hooks.done** is called</li></ul>                |
+| <b><i>Minify</i></b>                     | Represents the time taken for file compression during the compilation process in most cases | <ul><li>Calculates the sum of the time taken for each call of **compilation.hooks.optimizeChunkAssets** and **compilation.hooks.processAssets**</li></ul>                                     |
 
 ## Usage instructions
 
@@ -33,7 +33,7 @@ The following table explains the meaning and code implementation of each phase i
 By **clicking on the data of the `Bootstrap -> BeforeCompile` phase**, a popup will appear on the page, as shown in the following image:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-boostrap.jpg"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/compile-overall-boostrap.jpg"
   width="600px"
   style={{ margin: 'auto' }}
 />
@@ -56,12 +56,12 @@ Hovering over a data point in the chart will display the following information i
 
 In this section, you can navigate to "Compile Analysis" -> "Loader Analysis" -> [**"Loader Timeline"**](./loaders-timeline.mdx) in the navigation bar to view the timeline of loader compilation time.
 
-### AfterCompile -> Done details
+### AfterCompile -> done details
 
 By **clicking on the data of the `AfterCompile -> Done` phase**, a popup will appear on the page, as shown in the following image:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-aftercompile-1.jpg"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/compile-overall-aftercompile-1.jpg"
   width="600px"
   height="400px"
   style={{ margin: 'auto' }}
@@ -77,7 +77,7 @@ The popup mainly contains a data table that shows the relevant data of the calls
 Scrolling down the page will show the corresponding chart:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-aftercompile-2.jpg"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/compile-overall-aftercompile-2.jpg"
   width="600px"
   style={{ margin: 'auto' }}
 />
@@ -104,8 +104,8 @@ Minify details are currently not available for Rspack projects.
 
 By **clicking on the data of the `Minify` phase**, a popup will appear on the page, as shown in the following images:
 
-| <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-minify-1.jpg" /> | <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-minify-2.jpg" /> |
-| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| <img src="https://assets.rspack.dev/others/assets/rsdoctor/compile-overall-minify-1.jpg" /> | <img src="https://assets.rspack.dev/others/assets/rsdoctor/compile-overall-minify-2.jpg" /> |
+| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
 
 The content in the popup has similar meanings to the previous paragraphs, so it will not be repeated here.
 

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

@@ -9,7 +9,7 @@ Click on the navigation bar **"Compile Analysis"** -> **"Loader Analysis"** opti
 Firstly, in this module, you can directly see the file tree structure of all files processed by Loaders, as shown in the following image:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-anlaysis-all.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/loader-analysis-all.png"
   width="600px"
   style={{ margin: 'auto' }}
 />
@@ -28,7 +28,7 @@ The corresponding details will be explained in the following paragraphs.
 By **clicking on a selected directory**, you can see the **time statistics of all Loaders in the selected directory** ([estimated time consumption](../../guide/more/faq#loader-time-consuming-data-is-inaccurate)) on the right side of the file tree. The content of the "Statistics of \*\*\*" card is shown in the following image:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-anlaysis-table.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/loader-analysis-table.png"
   width="300px"
   height="400px"
   style={{ margin: 'auto' }}
@@ -52,18 +52,18 @@ By **clicking on a file**, a modal will appear with the following content:
 - "**Right section**": Information about the **input, output**, and **parameter data** of the selected Loader at the time of invocation.
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-analysis-code-change.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/loader-analysis-code-change.png"
   width="600px"
   style={{ margin: 'auto' }}
-/>{' '}
+/>
 
 - **Parameter Data**: Click on "**show more**" or the expand button in the top left corner to view the corresponding parameter information.
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-analysis-options.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/loader-analysis-options.png"
   width="600px"
   style={{ margin: 'auto' }}
-/>{' '}
+/>
 
 As shown in the image, we can obtain the following information about the **target file**:
 

package/docs/en/guide/usage/loaders-timeline.mdx

@@ -5,7 +5,7 @@
 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/options). 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"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/loader-timeline-overall.png"
   width="700"
   style={{ margin: 'auto' }}
 />
@@ -34,7 +34,7 @@ In the **Loaders Timeline**, the **left Y-axis** represents the **loader names**
 There are two selector at the top of the page, where you can enter the **Loaders** or **Files** you want to filter, and the timeline chart will be displayed based on the filtered content.
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-overall.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/loader-timeline-overall.png"
   width="700"
   style={{ margin: 'auto' }}
 />
@@ -44,7 +44,7 @@ There are two selector at the top of the page, where you can enter the **Loaders
 If we want to view the **summary of all data** for a single loader, we can hover over the position shown in the following image:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-loader-timeline.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/loader-timeline-loader-timeline.png"
   width="700"
   style={{ margin: 'auto' }}
 />
@@ -52,7 +52,7 @@ If we want to view the **summary of all data** for a single loader, we can hover
 At this point, we can see the **summary of all invocations** within a single loader (refer to the [Glossary](#glossary) for field definitions), as shown in the following image:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-loader-card.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/loader-timeline-loader-card.png"
   width="700"
   style={{ margin: 'auto' }}
 />
@@ -62,7 +62,7 @@ At this point, we can see the **summary of all invocations** within a single loa
 If we want to view the **information of a single invocation** for a loader, we can hover over any **colored stripe** within the position shown in the following image. At this point, we can see the **information of the current invocation** within a single loader (refer to the [Glossary](#glossary) for field definitions), as shown in the following image:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-loader-file.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/loader-timeline-loader-file.png"
   width="700"
   style={{ margin: 'auto' }}
 />

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

@@ -7,7 +7,7 @@
 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`.
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/module-analysis-tree.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/module-analysis-tree.png"
   width="600px"
   style={{ margin: 'auto' }}
 />
@@ -17,7 +17,7 @@ In this section, you can analyze the imported chain of a module. If you have the
 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**.
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/module-analysis-entry.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/module-analysis-entry.png"
   height="300px"
   width="440px"
   style={{ margin: 'auto' }}
@@ -37,7 +37,7 @@ The `Reasons Tree` displays the dependency chain of this `Module`, showing which
 - **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.
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/module-analysis-jump-icon.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/module-analysis-jump-icon.png"
   width="700px"
   style={{ margin: 'auto' }}
 />
@@ -52,7 +52,7 @@ The `Reasons Tree` displays the dependency chain of this `Module`, showing which
 - The `!` tag, hover over it to display the detailed path of the module.
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/module-analysis-icons.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/module-analysis-icons.png"
   width="600px"
   style={{ margin: 'auto' }}
 />

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

@@ -5,7 +5,7 @@
 In the **Rsdoctor** `Compile Analysis` secondary page `Plugins Analysis`, we can see the invocation data of all **Compiler Hooks** and **Compilation Hooks** used by the current Rspack or Webpack project. The content is shown in the following figure:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/plugins-analysis-overall.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/plugins-analysis-overall.png"
   width={'600px'}
   style={{ margin: 'auto' }}
 />
@@ -32,7 +32,7 @@ The meanings of the fields in the data statistics table on the page are as follo
 If we need to view the Rspack or Webpack configuration of the project, we can click on `View Bundler Config` in the upper right corner of the card. A floating layer will pop up, which contains the serialized **Bundler Config**, as shown in the following figure:
 
 <img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/plugins-analysis-config.png"
+  src="https://assets.rspack.dev/others/assets/rsdoctor/plugins-analysis-config.png"
   width={'400px'}
   style={{ margin: 'auto' }}
 />