@rsdoctor/docs 0.0.0-next-20240620044732

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

@@ -0,0 +1,184 @@
+## 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:
+
+### Rspack
+
+Initialize the RsdoctorRspackPlugin in the [plugins](https://www.rspack.dev/config/plugins.html#plugins) of `rspack.config.js`:
+
+```js title="rspack.config.js"
+const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
+
+module.exports = {
+  // ...
+  plugins: [
+    // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
+    process.env.RSDOCTOR &&
+      new RsdoctorRspackPlugin({
+        // plugin options
+      }),
+  ].filter(Boolean),
+};
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+### Rsbuild
+
+Initialize the RsdoctorRspackPlugin in the [tools.rspack](https://rsbuild.dev/config/tools/rspack) of `rsbuild.config.ts`:
+
+```js title="rsbuild.config.ts"
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default {
+  // ...
+  tools: {
+    rspack(config, { appendPlugins }) {
+      // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
+      if (process.env.RSDOCTOR) {
+        appendPlugins(
+          new RsdoctorRspackPlugin({
+            // plugin options
+          }),
+        );
+      }
+    },
+  },
+};
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+### Webpack
+
+Initialize the RsdoctorWebpackPlugin in the [plugins](https://webpack.js.org/configuration/plugins/#plugins) of `webpack.config.js`:
+
+```js title="webpack.config.js"
+const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
+
+module.exports = {
+  // ...
+  plugins: [
+    // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
+    process.env.RSDOCTOR &&
+      new RsdoctorWebpackPlugin({
+        // plugin options
+      }),
+  ].filter(Boolean),
+};
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+### Modern.js Framework
+
+Initialize the plugin in the [tools.rspack](https://modernjs.dev/configure/app/tools/rspack) of `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default {
+  // ...
+  tools: {
+    rspack(config, { appendPlugins }) {
+      // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
+      if (process.env.RSDOCTOR) {
+        appendPlugins(
+          new RsdoctorRspackPlugin({
+            // plugin options
+          }),
+        );
+      }
+    },
+  },
+};
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+:::tip
+For projects using Modern.js Webpack mode, please register the `RsdoctorWebpackPlugin` plugin through [tools.webpack](https://modernjs.dev/configure/app/tools/webpack).
+:::
+
+### Next.js Framework
+
+Initialize the RsdoctorWebpackPlugin plugin in the [Webpack Config](https://nextjs.org/docs/app/api-reference/next-config-js/webpack) of `next.config.mjs`.
+
+```ts title="next.config.mjs"
+import { RsdoctorWebpackPlugin } from '@rsdoctor/webpack-plugin';
+
+export default {
+  // ...
+  webpack: (config, { isServer }) => {
+    config.plugins.push(
+      new RsdoctorWebpackPlugin({
+        // plugin options
+      }),
+    );
+
+    return config;
+  },
+};
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+#### 📢 Next.js Project Notice
+
+1. Next.js Project Reporting Page Issues
+
+For more details, see: [FAQ](../more/faq#nextjs)
+
+2. Loader Analysis with Rules Overriding Not Supported in Next.js
+
+For more details, see: [FAQ](../more/faq#nextjs)
+
+### Vue Framework
+
+Initialize the `@rsdoctor/webpack-plugin` or `@rsdoctor/rspack-plugin` plugin in the configuration file. Here is an example using `rsbuild`:
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default defineConfig({
+  plugins: [pluginVue()],
+  performance: {
+    buildCache: false,
+  },
+  tools: {
+    bundlerChain: (chain, { CHAIN_ID }) => {
+      chain.plugin('Rsdoctor').use(RsdoctorRspackPlugin, [
+        {
+          // plugin options
+        },
+      ]);
+    },
+  },
+});
+```
+
+- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+
+#### 📢 Vue Project Notice
+
+Because `vue-loader` analysis is not supported at the moment, loader analysis is disabled by default for Vue projects. However, plugin and build artifact analysis can still be performed.
+
+---
+
+## Step 3: Run Build
+
+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.
+
+```bash
+# Enable Rsdoctor
+RSDOCTOR=true npm run build
+
+# Disable Rsdoctor
+npm run build
+```
+
+:::tip
+The Rsdoctor plugin provides some configurations, please refer to [Options](../../config/options/options).
+:::

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

@@ -0,0 +1,29 @@
+# Quick Start
+
+This document will explain how to access the Rsdoctor ability.
+
+## Step 1: Install dependencies
+
+import { PackageManagerTabs } from '@theme';
+
+### Rspack Projects
+
+For projects based on Rspack or Rsbuild, install the following dependencies:
+
+<PackageManagerTabs command="add @rsdoctor/rspack-plugin -D" />
+
+### Webpack Projects
+
+:::tip
+Not supported in Webpack 4.
+:::
+
+For projects based on Webpack, install the following dependencies:
+
+<PackageManagerTabs command="add @rsdoctor/webpack-plugin -D" />
+
+---
+
+import QuickStartShared from './quick-start-shared.mdx';
+
+<QuickStartShared />

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

@@ -0,0 +1,14 @@
+[
+  "project-overall",
+  "bundle-overall",
+  "compile-overall",
+  "compile-alerts",
+  "bundle-alerts",
+  "loaders-timeline",
+  "loaders-analysis",
+  "plugins-analysis",
+  "bundle-size",
+  "module-analysis",
+  "resolver",
+  "rule-config"
+]

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

@@ -0,0 +1,47 @@
+# Bundle Alerts
+
+## Introduction
+
+### Duplicate Third-party Packages
+
+- The `Duplicate Packages` card displays the number of duplicate third-party packages in the project. Click on the image to view the specific details of the duplicate packages. Note: The third-party packages mentioned here are the ones that have been bundled.
+
+<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' }}
+  />
+</div>
+
+- Duplicate Package Alerts Card
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alerts.png" />
+
+- Click on the icon to expand the details of the duplicate packages, where you can see the package name, version, size, and reference files.
+
+  - Click on the rightmost **"Show Relations"** to view the specific reference chain and corresponding reference file code location for this third-party package.
+
+  <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alters-relations.png" />
+
+  - Click on the rightmost **"!"** icon to view the specific explanation of the rule for the duplicate third-party package.
+
+  <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alters-rule.png" />
+
+### Duplicate Package Optimization
+
+Please check [Duplicate Package Optimization](../../blog/topic/duplicate-pkg-problem).
+
+### ECMA Version Check
+
+In the bundle alerts, the ECMA version of the bundle is checked, as shown in the following image:
+
+{' '}
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alerts-ecma.png" />
+
+Click on "**More**" to view the corresponding rule explanation.

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,148 @@
+# 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' }}
+/>
+
+## Supports BannerPlugin
+
+:::danger
+When enabling the BannerPlugin analysis, do not use Rsdoctor in the production version.
+:::
+
+Both Rspack and Webpack support the [BannerPlugin](https://www.rspack.dev/plugins/webpack/banner-plugin#bannerplugin), which is a built-in plugin that allows you to add specific content at the top or bottom of the generated chunks.
+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`.
+
+2. Enable Rsdoctor BannerPlugin capability through Rsdoctor options by setting `supports.banner`:
+
+```ts
+new RsdoctorRspackPlugin (
+  supports: {
+    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

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