@rsdoctor/docs 0.0.1

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

@@ -0,0 +1,55 @@
+# Bundle Overall
+
+## Overview
+
+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"
+  width="400px"
+  height="500px"
+  style={{ margin: 'auto' }}
+/>
+
+## Glossary
+
+| Term                             | Description                                                                                  |
+| -------------------------------- | -------------------------------------------------------------------------------------------- |
+| <b><i>total files</i></b>        | Represents the total number of files in the artifacts                                        |
+| <b><i>total size</i></b>         | Represents the total size of all files in the artifacts                                      |
+| <b><i>js files</i></b>           | Represents the number of `.js` files in the artifacts                                        |
+| <b><i>css files</i></b>          | Represents the number of `.css` files in the artifacts                                       |
+| <b><i>image files</i></b>        | Represents the number of `.png`/`.jpg`/`.svg`/`.webp`/`.jpeg`/`.gif`/`.bmp` files            |
+| <b><i>font files</i></b>         | Represents the number of `.ttf`/`.fnt`/`.fon`/`.otf`/`.woff`/`.woff2` files in the artifacts |
+| <b><i>media files</i></b>        | Represents the number of `.mp3`/`.mp4`/`.avi`/`.wav`/`.flv`/`.mov`/`.mpg`/`.mpeg` files      |
+| <b><i>html files</i></b>         | Represents the number of `.html` files in the artifacts                                      |
+| <b><i>modules</i></b>            | Represents the total number of modules in the artifacts                                      |
+| <b><i>duplicate packages</i></b> | Represents the total number of duplicate packages in the artifacts                           |
+
+## Usage Instructions
+
+### View Bundle Artifacts
+
+- The **"TOTAL Size"** data on the card represents the total size of the project. Clicking on this number will navigate to the [Bundle Size](./bundle-size.mdx)
+
+- The card also displays the number and total size of different file types. Clicking on the corresponding blue icon will display the list of files, as shown in the following image:
+  - **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"
+  width="400px"
+  height="600px"
+  style={{ margin: 'auto' }}
+/>
+
+### [Duplicate Packages](../../blog/topic/duplicate-pkg-problem.mdx)
+
+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"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+Here, you can see the list of all duplicate packages detected by Rsdoctor in the current build artifacts.

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

@@ -0,0 +1,122 @@
+# Bundle Analysis
+
+## 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/options).
+
+### 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).
+
+## 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' }}
+/>

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

@@ -0,0 +1,18 @@
+# Compilation Alerts
+
+We have also integrated the ability to detect warnings based on compilation data. If the current compilation results contain data that matches the rules defined by us, the `Compile Alerts` module will appear below the **Rsdoctor** main interface, as shown in the following figure:
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/compile-alerts.png" />
+
+Through this module, we can intuitively see some warning information about the compilation performance of our project, which helps us further optimize the compilation performance of the project.
+
+## Rules
+
+Currently, the compilation rules include:
+
+:::tip
+[Rule List](../more/rules)
+:::
+
+- `E1002` Default Import Check.
+- `E1003` Loader Performance Optimization.

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

@@ -0,0 +1,115 @@
+# Compile Overall
+
+## Overview
+
+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"
+  width="400px"
+  height="600px"
+  style={{ margin: 'auto' }}
+/>
+
+:::tip
+For each compilation phase, if the time data is displayed in <u>blue</u>, it means that you can <u>click to view the detailed time breakdown</u>.
+:::
+
+## Glossary
+
+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>                                     |
+
+## Usage Instructions
+
+### Bootstrap -> BeforeCompile Details
+
+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"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+The popup mainly contains a chart:
+
+- The **x-axis** represents **time**
+- The **y-axis** represents all the **hooks** that have been **tapped by plugins** before the **compiler.hooks.beforeCompile** is called
+- The data in the chart represents the **start and end time** of each **hook**.
+
+Hovering over a data point in the chart will display the following information in a tooltip:
+
+- **hook**: the name of the hook
+- **tap name**: the name value when [.tap](https://github.com/webpack/tapable#hookhookmap-interface) is called
+- **start**: the start time
+- **end**: the end time
+- **duration**: the duration, calculated as `end - start`
+
+### Compile Phase
+
+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
+
+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"
+  width="600px"
+  height="400px"
+  style={{ margin: 'auto' }}
+/>
+
+The popup mainly contains a data table that shows the relevant data of the calls. The field meanings are as follows:
+
+- **Plugin Tap Name**: the name value when [.tap](https://github.com/webpack/tapable#hookhookmap-interface) is called
+- **Hook**: the name of the hook
+- **calls**: the number of times the hook is called
+- **duration(total)**: the total time of all 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"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+The chart shows:
+
+- The **x-axis** represents **time**
+- The **y-axis** represents all the **hooks** that have been **tapped by plugins** between **compiler.hooks.afterCompile** and **compiler.hooks.done**
+- The data in the chart represents the **start and end time** of each **hook**.
+
+Hovering over a data point in the chart will display the following information in a tooltip:
+
+- **hook**: the name of the hook
+- **tap name**: the name value when [.tap](https://github.com/webpack/tapable#hookhookmap-interface) is called
+- **start**: the start time
+- **end**: the end time
+- **duration**: the duration, calculated as `end - start`
+
+### Minify Details
+
+:::tip
+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" /> |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+
+The content in the popup has similar meanings to the previous paragraphs, so it will not be repeated here.
+
+## Reference Documentation
+
+- [**Rspack Hooks**](https://www.rspack.dev/api/plugin-api.html#beforecompile)
+- [**Webpack Hooks**](https://webpack.js.org/api/compilation-hooks/)

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

@@ -0,0 +1,72 @@
+# Loaders Analysis
+
+**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/options).
+
+## 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:
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-anlaysis-all.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+In the **filter search box** at the top, you can filter Loaders and search for file names. After entering the name, the file tree dynamically displays the matching files, making it easier to locate the files you want to query.
+
+In the file tree structure below, there are two interactive forms to obtain different data information:
+
+- **Clicking on a directory**: Displays **Loader data for the file directory**.
+- **Clicking on a file**: Displays **detailed Loader information for the individual file**.
+
+The corresponding details will be explained in the following paragraphs.
+
+## Loader Data for File Directories
+
+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 xxx" 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"
+  width="300px"
+  height="400px"
+  style={{ margin: 'auto' }}
+/>
+
+Here are the main information we can obtain:
+
+- The number of **files processed** and the **estimated time consumption** for an **individual Loader** in the selected directory.
+- The number of **files processed** and the **estimated time consumption** for **all Loaders** in the selected directory.
+
+Usually, we can select some **third-party library directories** within `node_modules` and then determine whether it is necessary to set [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) for this directory based on the Loader's time consumption information. This helps reduce the processing time of common Loaders like `babel-loader`.
+
+If it is a third-party library with **advanced ES syntax** or a package within the **workspace**, we need to make more granular decisions at the individual file level based on the content in the next paragraph to optimize Loader performance.
+
+## Loader Details for Individual Files
+
+By **clicking on a file**, a modal will appear with the following content:
+
+- "**Left section**": A list of all **executed Loaders** for the clicked file and the **time consumption** of each Loader for compiling the file.
+
+- "**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"
+  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"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>{' '}
+
+As shown in the image, we can obtain the following information about the **target file**:
+
+- All the Loaders it has gone through.
+- The **parameter data** on the [**Loader Context**](https://webpack.js.org/api/loaders/#the-loader-context).
+- The input and output of the Loader.

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

@@ -0,0 +1,68 @@
+# Loaders Timeline
+
+## Overview
+
+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"
+  width="700"
+  style={{ margin: 'auto' }}
+/>
+
+## Glossary
+
+The fields in the chart on the page have the following meanings:
+
+| Term                                 | Description                                                                                                               |
+| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
+| <b><i>files</i></b>                  | Represents the **total number of files** processed by the loader                                                          |
+| <b><i>files(node_modules)</i></b>    | Represents the number of files processed by the loader within `node_modules`                                              |
+| <b><i>files(outside the cwd)</i></b> | Represents the number of files processed by the loader outside of the `cwd`                                               |
+| <b><i>duration</i></b>               | Represents the **estimated time** taken by the loader to execute                                                          |
+| <b><i>start(min)</i></b>             | Represents the **earliest start time** among all the data of the loader                                                   |
+| <b><i>end(max)</i></b>               | Represents the **latest end time** among all the data of the loader                                                       |
+| <b><i>isPitch</i></b>                | Represents whether the loader execution is a [pitch](https://webpack.js.org/api/loaders/#pitching-loader) function or not |
+| <b><i>filepath</i></b>               | Represents the **file path** received by the loader                                                                       |
+| <b><i>start</i></b>                  | Represents the **start time** of the loader execution                                                                     |
+| <b><i>end</i></b>                    | Represents the **end time** of the loader execution                                                                       |
+
+## Usage
+
+In the **Loaders Timeline**, the **left Y-axis** represents the **loader names**, while the **top X-axis** corresponds to **time (hour:minute:second)**. We can use the zoom feature and hover over the chart to view more detailed information about loader invocations.
+
+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"
+  width="700"
+  style={{ margin: 'auto' }}
+/>
+
+### Viewing Overall Loader Information
+
+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"
+  width="700"
+  style={{ margin: 'auto' }}
+/>
+
+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"
+  width="700"
+  style={{ margin: 'auto' }}
+/>
+
+### Viewing Individual Loader Invocation Information
+
+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"
+  width="700"
+  style={{ margin: 'auto' }}
+/>

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

@@ -0,0 +1,58 @@
+# Module Dependency 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).
+
+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"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+### 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**.
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/module-analysis-entry.png"
+  height="300px"
+  width="440px"
+  style={{ margin: 'auto' }}
+/>
+
+### 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)
+- **`Dependencies`**: The `Module`s that this `Module` depends on.
+
+## 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`.
+
+- **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"
+  width="700px"
+  style={{ margin: 'auto' }}
+/>
+
+- The `Usage` tag displays the purpose of various module tags.
+
+- 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).
+
+- 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"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>

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

@@ -0,0 +1,43 @@
+# Plugin Analysis
+
+## Overview
+
+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"
+  width={'600px'}
+  style={{ margin: 'auto' }}
+/>
+
+:::tip
+The plugin time will also calculate the internal plugin time of Rsdoctor.
+:::
+
+## Glossary
+
+The meanings of the fields in the data statistics table on the page are as follows:
+
+| Term                          | Description                                                                                               |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------- |
+| <b><i>Plugin Tap Name</i></b> | Represents the name value when [.tap is called](https://github.com/webpack/tapable#hookhookmap-interface) |
+| <b><i>Hook</i></b>            | Represents the **hook name**                                                                              |
+| <b><i>calls</i></b>           | Represents the **number of times called**                                                                 |
+| <b><i>duration(total)</i></b> | Represents the **total time of all calls**                                                                |
+
+## Usage Instructions
+
+### View Builder Config
+
+If we need to view the Webpack configuration of the project, we can click on `View Builder Config` in the upper right corner of the card. A floating layer will pop up, which contains the serialized **Builder 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"
+  width={'400px'}
+  style={{ margin: 'auto' }}
+/>
+
+## Reference Documentation
+
+- [**Rspack Hooks**](https://www.rspack.dev/api/plugin-api.html#beforecompile)
+- [**Webpack Hooks**](https://webpack.js.org/api/compilation-hooks/)

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

@@ -0,0 +1,51 @@
+# Project Overall
+
+## Overview
+
+In the main page of **Rsdoctor**, we can see a card named `Project Overall`, which provides information about the current project's **configuration, version, and alerts**. The content is shown in the following image:
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/project-overall-1.jpg"
+  width="400px"
+  height="600px"
+  style={{ margin: 'auto' }}
+/>
+
+## Glossary
+
+| Term                  | Description                                                                                                                                                   |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <b><i>errors</i></b>  | Represents the **error** level rules detected by Rsdoctor during the current run                                                                              |
+| <b><i>warns</i></b>   | Represents the **warn** level rules detected by Rsdoctor during the current run                                                                               |
+| <b><i>webpack</i></b> | Represents the Webpack version obtained during the current run                                                                                                |
+| <b><i>cwd</i></b>     | Represents the current working directory during the current run, i.e., [process.cwd()](https://nodejs.org/dist/latest-v18.x/docs/api/process.html#processcwd) |
+| <b><i>cpu</i></b>     | Represents the CPU information                                                                                                                                |
+| <b><i>memory</i></b>  | Represents the memory information during the current run                                                                                                      |
+| <b><i>node</i></b>    | Represents the version number of [Node.js](https://nodejs.org/)                                                                                               |
+| <b><i>yarn</i></b>    | Represents the version number of [Yarn](https://yarnpkg.com/), displayed as `Not Found` if not found                                                          |
+| <b><i>npm</i></b>     | Represents the version number of [npm](https://www.npmjs.com/)                                                                                                |
+| <b><i>pnpm</i></b>    | Represents the version number of [pnpm](https://pnpm.io/), displayed as `Not Found` if not found                                                              |
+
+## Usage
+
+### View Builder Config
+
+If we need to view the Webpack configuration of the project, we can click on `View Builder Config` in the top right corner of the card. A popup window will appear, containing the serialized [Webpack Config](https://webpack.js.org/configuration/), as shown in the following image:
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/project-overall-config.jpg"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+### errors / warns
+
+If the numbers displayed in the `errors` and `warns` sections of the card are greater than 0, we can click on them to view the corresponding details list. The following image shows an example using `warns`:
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/project-overall-warning.jpg"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+We can see the list of `warn` level alerts detected by Rsdoctor.