@rsdoctor/docs 1.0.0-rc.0 → 1.0.0

package/docs/en/blog/release/release-note-0_1.mdx

@@ -23,11 +23,11 @@ Rsdoctor is a one-stop build analysis tool for Rspack and Webpack. It allows for
 - **Compilation Visualization**: Rsdoctor visualizes the compilation behavior and time consumption, making it easy to view build issues.
 - **Multiple Analysis Capabilities**: Rsdoctor supports build artifact, build-time analysis, and anti-degradation capabilities:
   - Build artifact support for resource lists and module dependencies, etc.
-  - Build-time analysis supports Loader, Plugin, and Resolver building process analysis, including: Rspack's builtin:swc-loader.
+  - Build-time analysis supports Loader, Plugin, and Resolver building process analysis, including Rspack's builtin loaders.
   - Build rules support duplicate package detection and ES Version Check, etc.
-  - Currently, bundle Diff capabilities are also available.
+  - Currently, bundle diff capabilities are also available.
 - **Support Custom Rules**: In addition to built-in build scan rules, Rsdoctor also supports users adding custom component scan rules based on the build data of Rsdoctor.
-- **Framework-Independent**: Rsdoctor support all projects built on Webpack or Rspack.
+- **Framework-Independent**: Rsdoctor support all projects built on Rspack or webpack.
 
 ## 🛠️ Introduction
 
@@ -48,7 +48,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M
 
 #### Loader analysis
 
-- This module mainly provides the function of data analysis such as input and output, estimated time consumption, and parameters within **Rspack or Webpack Loaders**.
+- This module mainly provides the function of data analysis such as input and output, estimated time consumption, and parameters within **Rspack or webpack Loaders**.
 
 <div style={{ display: 'flex' }}>
   <img

package/docs/en/blog/release/release-note-0_3.mdx

@@ -78,7 +78,8 @@ export default {
 
 ## Support for banner plugin
 
-Both Rspack and Webpack support the BannerPlugin, which is an built-in plugin that allows you to add specific content at the top or bottom of the generated chunks. The added code will affect the parsing capability of the bundle.
+Both Rspack and webpack support the BannerPlugin, which is an built-in plugin that allows you to add specific content at the top or bottom of the generated chunks. The added code will affect the parsing capability of the bundle.
+
 Therefore, Rsdoctor has added support for the Banner Plugin.
 
 Please refer to [Support for BannerPlugin](/guide/usage/bundle-size#support-for-bannerplugin)

package/docs/en/blog/topic/loader-optimization.mdx

@@ -3,7 +3,7 @@
 import NextSteps from '@components/NextSteps';
 import Step from '@components/Step';
 
-Optimizing loaders is a common way to improve the performance of Rspack or Webpack compilation. In most cases, besides replacing the loader with a faster one, we can also reduce execution by setting [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) for the loader.
+Optimizing loaders is a common way to improve the performance of Rspack or webpack compilation. In most cases, besides replacing the loader with a faster one, we can also reduce execution by setting [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) for the loader.
 
 Rsdoctor provides two core modules, [Loader Overall](/guide/usage/loaders-timeline) and [Loader Analysis](/guide/usage/loaders-analysis), to help you optimize based on the loader's invocation information.
 

package/docs/en/config/options/options.mdx

@@ -175,7 +175,7 @@ Therefore, **the default configuration enables bundle analysis capabilities and
 
 #### RsdoctorWebpackPluginFeatures
 
-`features` type：
+`features` type:
 
 import Features from '@en/shared/features.md';
 
@@ -183,7 +183,7 @@ import Features from '@en/shared/features.md';
 
 #### RsdoctorRspackPluginFeatures
 
-`features` type：
+`features` type:
 
 import FeaturesRspack from '@en/shared/features-rspack.md';
 

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

@@ -68,45 +68,3 @@ When using Rsdoctor to analyze the compilation time of Rspack projects, you may
 - Reason: The loader in [CssExtractRspackPlugin](https://rspack.dev/plugins/rspack/css-extract-rspack-plugin) asynchronously calls other loaders during the pitch phase and waits for the callback results after these loaders execute. Therefore, the time taken by CssExtractRspackPlugin actually includes the execution time of other loaders and idle time.
 
 <img src="https://assets.rspack.dev/rsdoctor/css-extract-loader.png" />
-
-## Next.js
-
-### Issue with Next.js project report page
-
-Initialize the RsdoctorWebpackPlugin plugin in the [Webpack Config](https://nextjs.org/docs/app/api-reference/next-config-js/webpack) of `next.config.js`.
-
-However, in Next.js, when Rsdoctor is enabled and the **build command** is executed, the report server started by Rsdoctor will be disconnected. Therefore, if you need to reopen the report, you can use **[@rsdoctor/cli](../start/cli.mdx)** without performing the build operation.
-
-For example, if the build artifact of Rsdoctor is located at the path `.next/.rsdoctor/manifest.json`, you can open the report page by executing the following command:
-
-```bash
-npx @rsdoctor/cli analyze --profile .next/.rsdoctor/manifest.json
-
-```
-
-### Loader analysis with rule override is not supported in Next.js
-
-- Rsdoctor Loader logic: Since Rsdoctor modifies the Loader Rules, Rsdoctor wraps the Module in a Proxy to support Loader logic with rule override.
-
-- Next.js specific logic: In Next.js, the LoaderContext adds the currentTraceSpan property, which is obtained from the value retrieved using the Module as the key. However, since Rsdoctor wraps the Module in a Proxy (referred to as ProxyModule), retrieving the value using ProxyModule as the key will result in no value being obtained.
-
-Based on the above reason, Rsdoctor does not wrap the Module in a Proxy in Next.js projects, which means it does not support Loader analysis with rule override. If you encounter Loader errors, you need to configure the **[features](../../config/options/options#features)** parameter to disable **Loader** analysis. You can use the following configuration:
-
-```js title="next.config.js"
-const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
-
-module.exports = {
-  // ...
-  webpack: (config, { isServer }) => {
-    config.plugins.push(
-      new RsdoctorWebpackPlugin({
-        // 插件选项
-        features: ['bundle', 'plugins'],
-      }),
-    );
-    return config;
-  },
-};
-```
-
-- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).

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

@@ -3,20 +3,20 @@
 ## 💡 What is Rsdoctor?
 
 - Rsdoctor is a one-stop tool for diagnosing and analyzing the build process and build artifacts.
-- Rsdoctor is a tool that supports Webpack and Rspack build analysis.
+- Rsdoctor is a tool that supports Rspack and webpack build analysis.
 - Rsdoctor is an analysis tool that can display the time-consuming and behavioral details of the compilation.
-- Rsdoctor is a tool that provides bundle Diff and other anti-degradation capabilities simultaneously.
+- Rsdoctor is a tool that provides bundle diff and other anti-degradation capabilities simultaneously.
 
 ## 🔥 Features
 
 - **Compilation Visualization**: Rsdoctor visualizes the compilation behavior and time consumption, making it easy to view build issues.
 - **Multiple Analysis Capabilities**: Rsdoctor supports build artifact, build-time analysis, and anti-degradation capabilities:
   - Build artifact support for resource lists and module dependencies, etc.
-  - Build-time analysis supports Loader, Plugin, and Resolver building process analysis, including: Rspack's builtin:swc-loader.
+  - Build-time analysis supports Loader, Plugin, and Resolver building process analysis, including Rspack's builtin loaders.
   - Build rules support duplicate package detection and ES Version Check, etc.
-  - Currently, bundle Diff capabilities are also available.
+  - Currently, bundle diff capabilities are also available.
 - **Support Custom Rules**: In addition to built-in build scan rules, Rsdoctor also supports users adding custom component scan rules based on the build data of Rsdoctor.
-- **Framework-Independent**: Rsdoctor support all projects built on Webpack or Rspack.
+- **Framework-Independent**: Rsdoctor support all projects built on Rspack or webpack.
 
 ## 🛠️ Introduction
 
@@ -36,7 +36,7 @@ Provides corresponding data and analysis functions for **Loaders, Plugins, and M
 
 #### Loader analysis
 
-- This module mainly provides the function of data analysis such as input and output, estimated time consumption, and parameters within Rspack / Webpack Loaders.
+- This module mainly provides the function of data analysis such as input and output, estimated time consumption, and parameters within Rspack or webpack loaders.
 
 <img
   src="https://assets.rspack.dev/others/assets/rsdoctor/loader-timeline-overall.png"

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

@@ -75,41 +75,70 @@ export default {
 - **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).
+For projects using Modern.js's 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`.
+Initialize the RsdoctorWebpackPlugin plugin in the [Webpack Config](https://nextjs.org/docs/app/api-reference/next-config-js/webpack) of `next.config.ts`.
 
-```ts title="next.config.mjs"
+```ts title="next.config.ts"
+import type { NextConfig } from 'next';
 import { RsdoctorWebpackPlugin } from '@rsdoctor/webpack-plugin';
 
-export default {
-  // ...
-  webpack: (config, { isServer }) => {
-    config.plugins.push(
-      new RsdoctorWebpackPlugin({
-        // plugin options
-      }),
-    );
-
+const nextConfig: NextConfig = {
+  /* config options here */
+  webpack: (config) => {
+    if (config.name === 'client') {
+      config.plugins.push(
+        new RsdoctorWebpackPlugin({
+          disableClientServer: true,
+        }),
+      );
+    } else if (config.name === 'server') {
+      config.plugins.push(
+        new RsdoctorWebpackPlugin({
+          disableClientServer: true,
+          output: {
+            reportDir: './.next/server',
+          },
+        }),
+      );
+    }
     return config;
   },
 };
+
+export default nextConfig;
 ```
 
-- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
+- **Options:** The plugin provides some configuration options, please refer to [Options](../../config/options/options).
 
-#### 📢 Next.js project notice
+#### 📢 Note for Next.js Projects
 
-1. Next.js Project Reporting Page Issues
+Since Next.js closes the terminal service after the `build` execution is completed, the report page server run by Rsdoctor during the build process will also be shut down. At this point, you can reopen the report page using [@rsdoctor/cli](/guide/start/cli) without having to execute the build operation again.
 
-For more details, see: [FAQ](../more/faq#nextjs)
+- First, install [@rsdoctor/cli](/guide/start/cli):
 
-2. Loader Analysis with Rules Overriding Not Supported in Next.js
+import { PackageManagerTabs } from '@theme';
 
-For more details, see: [FAQ](../more/faq#nextjs)
+<PackageManagerTabs command="add @rsdoctor/cli -D" />
+
+- Second, add the following scripts commands to **package.json**, executing **client:rsdoctor** or **server:rsdoctor** can open the report for the corresponding builder:
+
+```ts
+  "scripts": {
+    "client:rsdoctor": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json",
+    "server:rsdoctor": "rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json"
+  }
+```
+
+For example, if Rsdoctor's build artifacts are located at the `.next/server/chunks/.rsdoctor/manifest.json` path, you can open the report page by executing the following command:
+
+```bash
+rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json
+
+```
 
 ### Vue project
 

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

@@ -25,7 +25,7 @@ Click on the **"Bundle Size"** option in the navigation bar to view the Bundle a
 - **`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.
+- **`Concatenated Module`**: A concatenated module is a technique that combines multiple modules into one closure during packaging. In the past, Rspack would package each module into a separate closure, and this encapsulation function would cause slower execution of JavaScript in the browser. Optimization can be achieved by enabling the [`optimization.concatenateModules`](https://webpack.js.org/plugins/module-concatenation-plugin/#root) parameter.
 
 ## Bundle overview
 
@@ -144,7 +144,8 @@ Click the **"Bundle Analyzer Graph"** button on the **"Bundle Size"** page to vi
 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.
+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:

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

@@ -2,7 +2,7 @@
 
 ## 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:
+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://assets.rspack.dev/others/assets/rsdoctor/plugins-analysis-overall.png"
@@ -29,7 +29,7 @@ The meanings of the fields in the data statistics table on the page are as follo
 
 ### View bundler config
 
-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:
+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://assets.rspack.dev/others/assets/rsdoctor/plugins-analysis-config.png"

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

@@ -6,31 +6,29 @@ In the main page of **Rsdoctor**, we can see a card named `Project Overall`, whi
 
 <img
   src="https://assets.rspack.dev/others/assets/rsdoctor/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-v22.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                                                              |
+| 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>rspack</i></b> | Represents the Rspack 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-v22.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 bundler config
 
-If we need to view the Rspack or Webpack configuration of the project, we can click on `View Bundler Config` in the top right corner of the card. A popup window will appear, containing the serialized [Bundler Config](https://webpack.js.org/configuration/), as shown in the following image:
+If we need to view the Rspack or webpack configuration of the project, we can click on `View Bundler Config` in the top right corner of the card. A popup window will appear, containing the serialized [Bundler Config](https://webpack.js.org/configuration/), as shown in the following image:
 
 <img
   src="https://assets.rspack.dev/others/assets/rsdoctor/project-overall-config.jpg"

package/docs/en/guide/usage/resolver.mdx

@@ -17,7 +17,7 @@ new rsdoctorWebpackPlugin({
 
 :::
 
-In the **Rsdoctor** `Module Resolve` section, we can see all the source files in the current Webpack project. By **clicking on a file**, we can view information such as the **module paths** imported in that file, the **before and after resolution path comparison**, and the **resolution time**, as shown in the following image:
+In the **Rsdoctor** `Module Resolve` section, we can see all the source files in the current Rspack project. By **clicking on a file**, we can view information such as the **module paths** imported in that file, the **before and after resolution path comparison**, and the **resolution time**, as shown in the following image:
 
 <img src="https://assets.rspack.dev/others/assets/rsdoctor/resolver.png" />
 

package/docs/zh/blog/release/release-note-0_1.mdx

@@ -10,7 +10,7 @@
 
 我们很高兴地宣布 [Rsdoctor](https://rsdoctor.dev/) v0.1 发布了！
 
-Rsdoctor 是一个针对 Rspack 和 Webpack 的一站式构建分析工具，可以对构建时和构建产物进行详细分析，让构建过程变得可视化和透明。
+Rsdoctor 是一个针对 Rspack 和 webpack 的一站式构建分析工具，可以对构建时和构建产物进行详细分析，让构建过程变得可视化和透明。
 
 ## 📌 定位
 
@@ -20,14 +20,14 @@ Rsdoctor 是一个针对 Rspack 和 Webpack 的一站式构建分析工具，可
 
 ## 🔥 特性
 
-- **编译可视化**：Rsdoctor 将编译行为及耗时进行可视化展示，方便开发同学查看构建问题。
+- **编译可视化**：Rsdoctor 将编译行为及耗时进行可视化展示，方便开发者查看构建问题。
 - **多种分析能力**：支持构建产物、构建时分析能力：
   - 构建产物支持资源列表及模块依赖等。
   - 构建时分析支持 Loader、Plugin、Resolver 构建过程分析。
-  - 支持 Rspack 的 builtin:swc-loader 分析。
+  - 支持分析 Rspack 的 builtin loaders。
   - 构建规则支持重复包检测及 ES Version Check 检查等。
 - **支持自定义规则**：除了内置构建扫描规则外，还支持用户根据 Rsdoctor 的构建数据添加自定义构建扫描规则。
-- **框架无关**：支持所有基于 Webpack 或 Rspack 构建的项目。
+- **框架无关**：支持所有基于 Rspack 或 webpack 构建的项目。
 
 ## 🛠️ 功能介绍
 

package/docs/zh/blog/release/release-note-0_3.mdx

@@ -75,7 +75,7 @@ export default {
 
 ## 支持 Banner plugin
 
-由于 Rspack 和 Webpack 都支持 BannerPlugin，且 BannerPlugin 可在生成的 chunk 顶部或尾部添加指定内容的代码段，这会影响到对 Bundle 的解析能力。因此，Rsdoctor 增加了 Banner Plugin 的支持。
+由于 Rspack 和 webpack 都支持 BannerPlugin，且 BannerPlugin 可在生成的 chunk 顶部或尾部添加指定内容的代码段，这会影响到对 Bundle 的解析能力。因此，Rsdoctor 增加了 Banner Plugin 的支持。
 
 详情请查看[支持 BannerPlugin](/guide/usage/bundle-size#%E6%94%AF%E6%8C%81-bannerplugin)
 

package/docs/zh/blog/topic/loader-optimization.mdx

@@ -3,7 +3,7 @@
 import NextSteps from '@components/NextSteps';
 import Step from '@components/Step';
 
-通常来说，优化 Loader 是比较常见的优化 Rspack 或 Webpack 编译性能的方式，而大部分情况下，我们除了通过替换**更快的** `loader` 之外，常见的手段就是给 `loader` 设置 [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) 来**减少执行**。
+通常来说，优化 Loader 是比较常见的优化 Rspack 或 webpack 编译性能的方式，而大部分情况下，我们除了通过替换**更快的** `loader` 之外，常见的手段就是给 `loader` 设置 [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) 来**减少执行**。
 
 而 **Rsdoctor** 提供了两个核心模块（[Loader Overall](/guide/usage/loaders-timeline) / [Loader Analysis](/guide/usage/loaders-analysis)）来帮助你根据 Loader 的调用信息进行深度优化。
 

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

@@ -66,45 +66,3 @@ module.exports = {
 - 原因：[CssExtractRspackPlugin](https://rspack.dev/plugins/rspack/css-extract-rspack-plugin) 中的 loader 在 pitch 阶段会异步调用其他 loader，并等待这些 loader 执行后的回调结果。因此，CssExtractRspackPlugin 的耗时实际上包括了其他 loader 的执行时间和空闲时间。
 
 <img src="https://assets.rspack.dev/rsdoctor/css-extract-loader.png" />
-
-## Next.js
-
-### Next.js 项目报告页面问题
-
-在 `next.config.js` 的 [Webpack Config](https://nextjs.org/docs/app/api-reference/next-config-js/webpack) 中初始化 RsdoctorWebpackPlugin 插件。
-
-然而，在 Next.js 中，当开启 Rsdoctor 并通过 build 执行构建后，Rsdoctor 启动的报告服务器会被断开。因此，如果需要再次打开报告，可以使用 **[@rsdoctor/cli](../start/cli.mdx)**，而无需执行构建操作。
-
-例如：Rsdoctor 的构建产物在 `.next/.rsdoctor/manifest.json` 路径，则可通过执行下面命令来打开报告页面：
-
-```bash
-npx @rsdoctor/cli analyze --profile .next/.rsdoctor/manifest.json
-
-```
-
-### Next.js 中不支持对 rules 进行重写的 loader 分析
-
-- Rsdoctor Loader 逻辑：由于 Rsdoctor 会对 Loader Rules 做修改，所以 Rsdoctor 为了兼容对 rules 进行重写的 Loader 逻辑，Rsdoctor 对 Module 进行了 Proxy 包裹。
-
-- Next.js 特有逻辑：而 Next.js 中会对 LoaderContext 添加 currentTraceSpan 属性，这个属性的值来自于以 Module 为 key 获取的值。因为 Rsdoctor 对 Module 进行了 Proxy 包裹（简称: ProxyModule），所以以 ProxyModule 为 key 是拿不到任何值的。
-
-基于上面原因，Rsdoctor 在 Next.js 项目中不对 Module 进行 Proxy 包裹逻辑，从而也就不支持对 rules 进行重写的 Loader 分析。如果遇到 Loader 报错，需要配置 **[features](../../config/options/options#features)** 参数来关闭 **Loader** 分析，如下配置即可：
-
-```js title="next.config.js"
-const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
-
-module.exports = {
-  // ...
-  webpack: (config, { isServer }) => {
-    config.plugins.push(
-      new RsdoctorWebpackPlugin({
-        // 插件选项
-        features: ['bundle', 'plugins'],
-      }),
-    );
-    return config;
-  },
-};
-```
-
-- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。

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

@@ -3,20 +3,20 @@
 ## 💡 什么是 Rsdoctor？
 
 - Rsdoctor 是一个面向构建过程与构建产物提供诊断和分析的一站式工具。
-- Rsdoctor 是一个支持 Webpack 及 Rspack 构建分析工具。
+- Rsdoctor 是一个支持 Rspack 及 webpack 构建分析工具。
 - Rsdoctor 是一个可以展示编译耗时及编译行为细节的分析工具。
 - Rsdoctor 是一个提供 Bundle Diff 等防劣化能力的工具。
 
 ## 🔥 特性
 
-- **编译可视化**：Rsdoctor 将编译行为及耗时进行可视化展示，方便开发同学查看构建问题。
+- **编译可视化**：Rsdoctor 将编译行为及耗时进行可视化展示，方便开发者查看构建问题。
 - **多种分析能力**：支持构建产物、构建时分析能力：
   - 构建产物支持资源列表及模块依赖等。
   - 构建时分析支持 Loader、Plugin、Resolver 构建过程分析。
-  - 支持 Rspack 的 builtin:swc-loader 分析。
+  - 支持分析 Rspack 的 builtin loaders。
   - 构建规则支持重复包检测及 ES Version Check 检查等。
 - **支持自定义规则**：除了内置构建扫描规则外，还支持用户根据 Rsdoctor 的构建数据添加自定义构建扫描规则。
-- **框架无关**：支持所有基于 Webpack 或 Rspack 构建的项目。
+- **框架无关**：支持所有基于 Rspack 或 webpack 构建的项目。
 
 ## 🛠️ 功能介绍
 
@@ -36,7 +36,7 @@
 
 #### Loader 分析
 
-- 该模块主要提供了 **Rspack 或 Webpack 的 Loaders** 内的输入输出、预估耗时、参数等数据分析的功能。
+- 该模块主要提供了 **Rspack 或 webpack 的 Loaders** 内的输入输出、预估耗时、参数等数据分析的功能。
 
   <img
     src="https://assets.rspack.dev/others/assets/rsdoctor/loader-timeline-overall.png"

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

@@ -75,40 +75,70 @@ export default {
 - **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
 
 :::tip
-对于使用 Modern.js Webpack 模式的项目，请使用 [tools.webpack](https://modernjs.dev/configure/app/tools/webpack) 注册 `RsdoctorWebpackPlugin` 插件。
+对于使用 Modern.js webpack 模式的项目，请使用 [tools.webpack](https://modernjs.dev/configure/app/tools/webpack) 注册 `RsdoctorWebpackPlugin` 插件。
 :::
 
 ### Next.js 项目
 
 在 `next.config.js` 的 [Webpack Config](https://nextjs.org/docs/app/api-reference/next-config-js/webpack) 中初始化 RsdoctorWebpackPlugin 插件。
 
-```ts title="next.config.mjs"
+```ts title="next.config.ts"
+import type { NextConfig } from 'next';
 import { RsdoctorWebpackPlugin } from '@rsdoctor/webpack-plugin';
 
-export default {
-  // ...
-  webpack: (config, { isServer }) => {
-    config.plugins.push(
-      new RsdoctorWebpackPlugin({
-        // 插件选项
-      }),
-    );
+const nextConfig: NextConfig = {
+  /* config options here */
+  webpack: (config) => {
+    if (config.name === 'client') {
+      config.plugins.push(
+        new RsdoctorWebpackPlugin({
+          disableClientServer: true,
+        }),
+      );
+    } else if (config.name === 'server') {
+      config.plugins.push(
+        new RsdoctorWebpackPlugin({
+          disableClientServer: true,
+          output: {
+            reportDir: './.next/server',
+          },
+        }),
+      );
+    }
     return config;
   },
 };
+
+export default nextConfig;
 ```
 
 - **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
 
 #### 📢 Next.js 项目使用注意
 
-1. Next.js 项目报告页面问题
+由于 Next.js 在 `build` 执行结束后会终止终端服务，因此 Rsdoctor 在构建过程中运行的报告页面服务器也会被关闭。此时，你可以通过 [@rsdoctor/cli](/guide/start/cli) 再次打开页面报告，而无需重新执行构建操作。
+
+- 首先，安装 [@rsdoctor/cli](/guide/start/cli)：
 
-详情查看：[FAQ](../more/faq#nextjs)
+import { PackageManagerTabs } from '@theme';
 
-2. Next.js 中不支持对 rules 进行重写的 Loader 分析
+<PackageManagerTabs command="add @rsdoctor/cli -D" />
 
-详情查看：[FAQ](../more/faq#nextjs)
+- 其次，**package.json** 里添加如下 scripts 命令，执行 **client:rsdoctor** 或者 **server:rsdoctor** 可打开对应构建器的报告：
+
+```ts
+  "scripts": {
+    "client:rsdoctor": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json",
+    "server:rsdoctor": "rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json"
+  }
+```
+
+例如：Rsdoctor 的构建产物在 `.next/server/chunks/.rsdoctor/manifest.json` 路径，则可通过执行下面命令来打开报告页面：
+
+```bash
+rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json
+
+```
 
 ### Vue 项目
 

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

@@ -135,7 +135,8 @@
 开启 BannerPlugin 分析时，请勿在生产版本中使用 Rsdoctor。
 :::
 
-由于 Rspack 和 Webpack 都支持 [BannerPlugin](https://www.rspack.dev/plugins/webpack/banner-plugin#bannerplugin)，BannerPlugin 是可在生成的 chunk 顶部或尾部添加一段指定的内容的内置插件。
+由于 Rspack 和 webpack 都支持 [BannerPlugin](https://www.rspack.dev/plugins/webpack/banner-plugin#bannerplugin)，BannerPlugin 是可在生成的 chunk 顶部或尾部添加一段指定的内容的内置插件。
+
 添加的代码段将会影响到对 Bundle 的解析能力。
 
 Rsdoctor 兼容了对 BannerPlugin 这种添加代码的逻辑，但因为 Rsdoctor 需要添加标记代码，所以没有默认开启，以下两种情况会开启 Rsdoctor BannerPlugin 能力：

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

@@ -27,7 +27,7 @@
 
 ### 名词解释
 
-- **`Reasons`** : 顾名思义是 `[原因]` 的意思，即某个 `Module` 存在的原因。Reasons 就是该 `Module` 被哪些 `Module` 们引入，而整个 `Reasons Tree` 就是这个 `Module` 的整个上游引用链，包括了直接父级和间接父级们。[即 Webpack 的 stats.reasons。](https://webpack.js.org/configuration/stats/#statsreasons)
+- **`Reasons`** : 顾名思义是 `[原因]` 的意思，即某个 `Module` 存在的原因。Reasons 就是该 `Module` 被哪些 `Module` 们引入，而整个 `Reasons Tree` 就是这个 `Module` 的整个上游引用链，包括了直接父级和间接父级们。[即 Rspack 的 stats.reasons。](https://webpack.js.org/configuration/stats/#statsreasons)
 - **`Dependencies`** : 是该 `Module` 依赖了哪些 `Module`。
 
 ## Reasons 依赖树

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

@@ -2,7 +2,7 @@
 
 ## 功能概览
 
-我们在 **Rsdoctor** 内 `Compile Analysis` 的二级页面 `Plugins Analysis` 中，可以看到当前 Rspack 或 Webpack 项目中所有被插件使用过的 **Compiler Hooks** 以及 **Compilation Hooks** 的调用数据信息，其内容如下图所示：
+我们在 **Rsdoctor** 内 `Compile Analysis` 的二级页面 `Plugins Analysis` 中，可以看到当前 Rspack 或 webpack 项目中所有被插件使用过的 **Compiler Hooks** 以及 **Compilation Hooks** 的调用数据信息，其内容如下图所示：
 
 <img
   src="https://assets.rspack.dev/others/assets/rsdoctor/plugins-analysis-overall.png"
@@ -29,7 +29,7 @@ plugin 耗时中会计算 Rsdoctor 的内部插件耗时。
 
 ### View bundler config
 
-如果我们需要查看项目的 Rspack 或 Webpack 配置，则可以通过点击卡片右上角的 `View Bundler Config`，页面会弹出一个浮层，其中包含被序列化后的 **Bundler Config**，如下图所示：
+如果我们需要查看项目的 Rspack 或 webpack 配置，则可以通过点击卡片右上角的 `View Bundler Config`，页面会弹出一个浮层，其中包含被序列化后的 **Bundler Config**，如下图所示：
 
 <img
   src="https://assets.rspack.dev/others/assets/rsdoctor/plugins-analysis-config.png"

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

@@ -6,31 +6,29 @@
 
 <img
   src="https://assets.rspack.dev/others/assets/rsdoctor/project-overall-1.jpg"
-  width="400px"
-  height="600px"
   style={{ margin: 'auto' }}
 />
 
 ## 名词释义
 
-| 名词                  | 描述说明                                                                                                                |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| <b><i>errors</i></b>  | 代表 Rsdoctor 在当次运行中检测出的 **error** 级别的规则                                                                 |
-| <b><i>warns</i></b>   | 代表 Rsdoctor 在当次运行中检测出的 **warn** 级别的规则                                                                  |
-| <b><i>webpack</i></b> | 代表当次运行时获取到的 Webpack 版本                                                                                     |
-| <b><i>cwd</i></b>     | 代表当次运行时的进程执行目录，即 [process.cwd()](https://nodejs.org/dist/latest-v22.x/docs/api/process.html#processcwd) |
-| <b><i>cpu</i></b>     | 代表 cpu 信息                                                                                                           |
-| <b><i>memory</i></b>  | 代表当次运行时的 memory 信息                                                                                            |
-| <b><i>node</i></b>    | 代表 [Node.js](https://nodejs.org/) 版本号                                                                              |
-| <b><i>yarn</i></b>    | 代表 [Yarn](https://yarnpkg.com/) 版本号，如果没有找到则显示为 `Not Found`                                              |
-| <b><i>npm</i></b>     | 代表 [npm](https://www.npmjs.com/) 版本号                                                                               |
-| <b><i>pnpm</i></b>    | 代表 [pnpm](https://pnpm.io/) 版本号，如果没有找到则显示为 `Not Found`                                                  |
+| 名词                 | 描述说明                                                                                                                |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| <b><i>errors</i></b> | 代表 Rsdoctor 在当次运行中检测出的 **error** 级别的规则                                                                 |
+| <b><i>warns</i></b>  | 代表 Rsdoctor 在当次运行中检测出的 **warn** 级别的规则                                                                  |
+| <b><i>rspack</i></b> | 代表当次运行时获取到的 Rspack 版本                                                                                      |
+| <b><i>cwd</i></b>    | 代表当次运行时的进程执行目录，即 [process.cwd()](https://nodejs.org/dist/latest-v22.x/docs/api/process.html#processcwd) |
+| <b><i>cpu</i></b>    | 代表 cpu 信息                                                                                                           |
+| <b><i>memory</i></b> | 代表当次运行时的 memory 信息                                                                                            |
+| <b><i>node</i></b>   | 代表 [Node.js](https://nodejs.org/) 版本号                                                                              |
+| <b><i>yarn</i></b>   | 代表 [Yarn](https://yarnpkg.com/) 版本号，如果没有找到则显示为 `Not Found`                                              |
+| <b><i>npm</i></b>    | 代表 [npm](https://www.npmjs.com/) 版本号                                                                               |
+| <b><i>pnpm</i></b>   | 代表 [pnpm](https://pnpm.io/) 版本号，如果没有找到则显示为 `Not Found`                                                  |
 
 ## 使用说明
 
 ### View bundler config
 
-如果我们需要查看项目的 Rspack 或 Webpack 配置，则可以通过点击卡片右上角的 `View Bundler Config`，页面会弹出一个浮层，其中包含被序列化后的 [Bundler Config](https://webpack.js.org/configuration/)，如下图所示：
+如果我们需要查看项目的 Rspack 或 webpack 配置，则可以通过点击卡片右上角的 `View Bundler Config`，页面会弹出一个浮层，其中包含被序列化后的 [Bundler Config](https://webpack.js.org/configuration/)，如下图所示：
 
 <img
   src="https://assets.rspack.dev/others/assets/rsdoctor/project-overall-config.jpg"

package/docs/zh/guide/usage/resolver.mdx

@@ -17,7 +17,7 @@ new rsdoctorRspackPlugin({
 
 :::
 
-我们在 **Rsdoctor** 内 `Module Resolve` 中，可以看到当前 Webpack 项目中的所有源文件，通过**点击某个文件**可以查看该文件中引入的**模块路径**、**解析前后的路径对比**、**解析耗时**等信息，其内容如下图所示：
+我们在 **Rsdoctor** 内 `Module Resolve` 中，可以看到当前 Rspack 项目中的所有源文件，通过**点击某个文件**可以查看该文件中引入的**模块路径**、**解析前后的路径对比**、**解析耗时**等信息，其内容如下图所示：
 
 <img src="https://assets.rspack.dev/others/assets/rsdoctor/resolver.png" />
 

package/docs/zh/guide/usage/rule-config.mdx

@@ -1,6 +1,6 @@
 # 编译诊断规则
 
-构建诊断规则是类似于 `ESLint` 的 lint 工具，但是与其不同之处在于，`ESLint` 是在静态情况下进行代码扫描和构建流程无关。而这里的代码诊断是和 `Rspack 或 Webpack` 的构建流程紧密相关的，其中会加入许许多多构建中产生的内部参数用于辅助判断，比如 ModuleGraph，比如 Webpack 对每个模块的内部标记，比如代码经过转换之后加入的 runtime 等等……
+构建诊断规则是类似于 `ESLint` 的 lint 工具，但是与其不同之处在于，`ESLint` 是在静态情况下进行代码扫描和构建流程无关。而这里的代码诊断是和 `Rspack 或 Webpack` 的构建流程紧密相关的，其中会加入许许多多构建中产生的内部参数用于辅助判断，比如 ModuleGraph，比如 Rspack 对每个模块的内部标记，比如代码经过转换之后加入的 runtime 等等……
 
 在构建过程中发现了问题，会在 CLI 和最后弹出的诊断汇总网页中看到，如下图：
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/docs",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/web-infra-dev/rsdoctor",
@@ -19,7 +19,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@rspress/plugin-rss": "1.41.3",
+    "@rspress/plugin-rss": "2.0.0-alpha.3",
     "@types/node": "^16",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
@@ -30,12 +30,12 @@
     "rspress-plugin-font-open-sans": "^1.0.0",
     "rspress-plugin-sitemap": "^1.1.1",
     "typescript": "^5.2.2",
-    "@rsdoctor/types": "1.0.0-rc.0"
+    "@rsdoctor/types": "1.0.0"
   },
   "dependencies": {
-    "@rstack-dev/doc-ui": "1.7.2",
+    "@rstack-dev/doc-ui": "1.7.3",
     "react-markdown": "^9.0.3",
-    "rspress": "1.41.3"
+    "rspress": "2.0.0-alpha.3"
   },
   "scripts": {
     "dev": "rspress dev",