@rsdoctor/docs 0.0.1 → 0.1.9-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,67 @@
+## Options
+
+**Type:** `Object`
+
+This is the options for the [RsdoctorWebpackPlugin](#rsdoctorwebpackplugin) and [RsdoctorRspackPlugin](#rsdoctorrspackplugin). It contains these properties:
+
+- [disableClientServer](#disableclientserver)
+- [features](#features)
+
+### disableClientServer
+
+- **Type:** `boolean`
+- **Optional:** `true`
+- **Default:** `false`
+
+Whether to automatically open the Rsdoctor report page. If you do not need to view the analysis report provided by Rsdoctor in the browser, you can enable this configuration item.
+
+### features
+
+- **Type:** [RsdoctorWebpackPluginFeatures](#rsdoctorwebpackpluginfeatures) | [Array\<keyof RsdoctorWebpackPluginFeatures\>](#rsdoctorwebpackpluginfeatures) | [RsdoctorRspackPluginFeatures](#rsdoctorrspackpluginfeatures) | [Array\<keyof RsdoctorRspackPluginFeatures\>](#rsdoctorrspackpluginfeatures)
+- **Optional:** `true`
+- **Default:** `['loader', 'plugins', 'bundle']`
+
+#### features values
+
+:::tip
+
+**If an "out of memory" error occurs, you can try the following:**
+
+1. Open the **lite** mode。
+2. Increase the node memory limit, for example: NODE_OPTIONS=--max-old-space-size=8096.
+
+- Reason: During the build process, source code information is cached, which exceeds memory. Therefore, enabling the **"lite" mode** can help alleviate the problem.
+- Difference: The difference between the "lite" mode and the normal mode is that source code information is no longer cached, only packaged code information is cached. Thus, the code analyzed on the page will also only be packaged.
+
+:::
+
+The `features` attribute is used to analyze the function switches, and the specific functional items are as follows:
+
+- **loader**: Analysis of Loader time consumption and code compilation changes, enabled by default.
+- **plugins**: Analysis of Plugins calls and time consumption, enabled by default.
+- **bundle**: Analysis of build artifacts, enabled by default.
+- **resolver**: resolver analysis, disabled by default.
+- **lite**: lite mode. The difference between lite mode and normal mode is that source code information is no longer cached, only packaged code information is cached, so the code analyzed on the page will also be packaged. The default is normal mode.
+
+Therefore, **the default configuration enables bundle analysis capabilities and Loader and Plugin build-time analysis**. The Resolver analysis capability is not enabled, and Rspack does not currently support Resolver analysis capabilities.
+
+#### features types
+
+- if the `features` is set as an `Array`, it will **open** the features which you define in this array **only**.
+- if the `features` is set as an `Object`, it will **close** the features which you set the value is `false`.
+
+#### RsdoctorWebpackPluginFeatures
+
+The types of `features` are as follows：
+
+import Features from '@zh/shared/features.md';
+
+<Features />
+
+#### RsdoctorRspackPluginFeatures
+
+The types of `features` are as follows：
+
+import FeaturesRspack from '@zh/shared/features-rspack.md';
+
+<FeaturesRspack />

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

@@ -118,18 +118,54 @@ Therefore, **the default configuration enables bundle analysis capabilities and
 - if the `features` is set as an `Array`, it will **open** the features which you define in this array **only**.
 - if the `features` is set as an `Object`, it will **close** the features which you set the value is `false`.
 
-#### RsdoctorWebpackPluginFeatures
+### reportCodeType 参数
 
-The types of `features` are as follows：
+- Type: `{ noModuleSource?: boolean; noAssetsAndModuleSource?: boolean }`
+- Optional: true
+- Default: undefined
+- Description
 
-import Features from '@zh/shared/features.md';
+  - 选择输出的分析数据：
 
-<Features />
+    - undefined 是所有完整数据；
+    - noModuleSource: true 是输出除了 module 代码之外的数据；Module 代码即 Bundle 内拆解出来的一个一个文件的打包模块代码。
+    - noAssetsAndModuleSource: true 是输出除了 module 代码和 Assets 产物代码之外的数据。
 
-#### RsdoctorRspackPluginFeatures
+  - Select the output analysis data:
 
-The types of `features` are as follows：
+    - undefined is all complete data;
 
-import FeaturesRspack from '@zh/shared/features-rspack.md';
+    - noModuleSource: true is the output of data other than module code; Module code is the packaged module code of a file disassembled in the Bundle.
 
-<FeaturesRspack />
+    - noAssetsAndModuleSource: true is the output of data other than module code and Assets product code.
+
+- Example
+
+```js
+new WebDoctorWebpackPlugin({
+        disableClientServer: false, // 建议 CI 环境下关闭 server 能力，否则会卡住 pipeline 流程，检测 CI 环境可以使用 `process.env.CI_ACTOR`.
+        features: ['loader', 'bundle', 'plugins'],
+        reportCodeType: { noModuleSource: true } // { noAssetsAndModuleSource: true }
+      }),
+```
+
+### disableTOSUpload
+
+- Type: boolean
+- Optional: true
+- Default: false
+- Description
+
+  开启或关闭需要 tos 上传， true 是关闭 tos 上传，false 是开启 tos 上传。
+
+  Turn tos upload on or off. True is to turn off tos upload, and false is tos upload on.
+
+- Example
+
+```js
+new WebDoctorWebpackPlugin({
+        disableClientServer: false, // 建议 CI 环境下关闭 server 能力，否则会卡住 pipeline 流程，检测 CI 环境可以使用 `process.env.CI_ACTOR`.
+        features: ['loader', 'bundle', 'plugins'],
+        disableTOSUpload: true,
+      }),
+```

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 { RsdoctorRspackPlugin } from '@rsdoctor/rspack-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

@@ -24,187 +24,6 @@ For projects based on Webpack, install the following dependencies:
 
 ---
 
-## Step 2: Register Plugin
+import QuickStartShared from './quick-start-shared.mdx';
 
-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 { RsdoctorRspackPlugin } from '@rsdoctor/rspack-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).
-:::
+<QuickStartShared />

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

@@ -27,9 +27,9 @@ The meanings of the fields in the data statistics table on the page are as follo
 
 ## Usage Instructions
 
-### View Builder Config
+### View Bundler 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:
+If we need to view the Rspack or Webpack configuration of the project, we can click on `View Bundler Config` in the upper right corner of the card. A floating layer will pop up, which contains the serialized **Bundler Config**, as shown in the following figure:
 
 <img
   src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/plugins-analysis-config.png"

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

@@ -28,9 +28,9 @@ In the main page of **Rsdoctor**, we can see a card named `Project Overall`, whi
 
 ## Usage
 
-### View Builder Config
+### View Bundler 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:
+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://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/project-overall-config.jpg"

package/docs/zh/config/options/options-shared.mdx

@@ -0,0 +1,70 @@
+## Options
+
+**类型：** `Object`
+
+这个 `Options` 是 [RsdoctorWebpackPlugin](#rsdoctorwebpackplugin-%E6%8F%92%E4%BB%B6) 和 [RsdoctorRspackPlugin](#rsdoctorrspackplugin-%E6%8F%92%E4%BB%B6) 的配置项。它包含以下属性值：
+
+- [disableClientServer](#disableclientserver)
+- [features](#features)
+
+### disableClientServer
+
+- **Type:** `boolean`
+- **Optional:** `true`
+- **Default:** `false`
+
+:::tip
+建议在 CI 环境下将 disableClientServer 设置为 true，否则启动的服务会卡住 pipeline 流程.
+:::
+
+是否需要自动打开 Rsdoctor 报告页面。如果你不需要在浏览器内查看本次 Rsdoctor 提供的分析报告，则可以开启这个配置项。
+
+### features
+
+- **Type:** [RsdoctorWebpackPluginFeatures](#rsdoctorwebpackpluginfeatures) | [Array\<keyof RsdoctorWebpackPluginFeatures\>](#rsdoctorwebpackpluginfeatures) | [RsdoctorRspackPluginFeatures](#rsdoctorrspackpluginfeatures) | [Array\<keyof RsdoctorRspackPluginFeatures\>](#rsdoctorrspackpluginfeatures)
+- **Optional:** `true`
+- **Default:** `['loader', 'plugins', 'bundle']`
+
+#### features values
+
+:::tip
+**如果出现了 out of memory 的报错，可以尝试：**
+
+1. 打开 **lite** 模式。
+2. 增大 node 内存上限，例如：NODE_OPTIONS=--max-old-space-size=8096。
+
+- 原因：因为构建过程中，缓存了源码信息，超过了内存，所以开启 `lite` 模式可以缓解。
+- 区别：`lite` 模式和普通模式的区别就是不再缓存源码信息，只缓存打包后的代码信息，这样分析页面上的代码也将是打包后的。
+
+:::
+
+features 属性是用于分析功能开关的，具体的功能项如下：
+
+- **loader**：Loaders 耗时及代码编译变化分析，默认开启。
+- **plugins**：Plugins 调用以及耗时分析，默认开启。
+- **bundle**：构建产物分析，默认开启。
+- **resolver**：resolver 分析，默认关闭。
+- **lite**: lite 模式。lite 模式和普通模式的区别就是不再缓存源码信息，只缓存打包后的代码信息，这样分析页面上的代码也将是打包后的。默认普通模式。
+
+所以，**默认配置是开启了 Bundle 分析能力、 Loader he Plugin 构建时分析**。没有开启 Resolver 分析能力， Rspack 暂不支持 Resolver 分析能力。
+
+#### features types
+
+- 如果你将 `features` 设置为**数组**类型，该插件**只会开启**你在 `features` 数组中定义的功能。
+- 如果你将 `features` 设置为**简单对象**类型，该插件**只会关闭**你在 `features` 对象中值为 `false` 的功能。
+
+#### RsdoctorWebpackPluginFeatures
+
+`features` 类型如下：
+
+import Features from '@zh/shared/features.md';
+
+<Features />
+
+#### RsdoctorRspackPluginFeatures
+
+`features` 类型如下：
+
+import FeaturesRspack from '@zh/shared/features-rspack.md';
+
+<FeaturesRspack />

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

@@ -0,0 +1,183 @@
+## 第二步：注册插件
+
+依赖安装完成后，你需要在项目中接入 Rsdoctor 插件，下面是一些常见工具和框架的示例：
+
+### Rspack 项目
+
+在 `rspack.config.js` 的 [plugins](https://www.rspack.dev/config/plugins.html#plugins) 中初始化 RsdoctorRspackPlugin 插件，参考：
+
+```js title="rspack.config.js"
+const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
+
+module.exports = {
+  // ...
+  plugins: [
+    // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
+    process.env.RSDOCTOR &&
+      new RsdoctorRspackPlugin({
+        // 插件选项
+      }),
+  ].filter(Boolean),
+};
+```
+
+- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
+
+### Rsbuild 项目
+
+在 `rsbuild.config.ts` 的 [tools.rspack](https://rsbuild.dev/config/tools/rspack) 中初始化 RsdoctorWebpackPlugin 插件，参考：
+
+```js title="rsbuild.config.ts"
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default {
+  // ...
+  tools: {
+    rspack(config, { appendPlugins }) {
+      // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
+      if (process.env.RSDOCTOR) {
+        appendPlugins(
+          new RsdoctorRspackPlugin({
+            // 插件选项
+          }),
+        );
+      }
+    },
+  },
+};
+```
+
+- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
+
+### Webpack 项目
+
+在 `webpack.config.js` 的 [plugins](https://webpack.js.org/configuration/plugins/#plugins) 中初始化 RsdoctorWebpackPlugin 插件，参考：
+
+```js title="webpack.config.js"
+const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
+
+module.exports = {
+  // ...
+  plugins: [
+    // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
+    process.env.RSDOCTOR &&
+      new RsdoctorWebpackPlugin({
+        // 插件选项
+      }),
+  ].filter(Boolean),
+};
+```
+
+- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
+
+### Modern.js 项目
+
+在 `modern.config.ts` 的 [tools.bundlerChain](https://modernjs.dev/configure/app/tools/rspack) 中初始化插件，参考：
+
+```ts title="modern.config.ts"
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default {
+  // ...
+  tools: {
+    rspack(config, { appendPlugins }) {
+      // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
+      if (process.env.RSDOCTOR) {
+        appendPlugins(
+          new RsdoctorRspackPlugin({
+            // 插件选项
+          }),
+        );
+      }
+    },
+  },
+};
+```
+
+- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
+
+:::tip
+对于使用 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"
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default {
+  // ...
+  webpack: (config, { isServer }) => {
+    config.plugins.push(
+      new RsdoctorWebpackPlugin({
+        // 插件选项
+      }),
+    );
+    return config;
+  },
+};
+```
+
+- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
+
+#### 📢 Next.js 项目使用注意
+
+1. Next.js 项目报告页面问题
+
+详情查看：[FAQ](../more/faq#nextjs)
+
+2. Next.js 中不支持对 rules 进行重写的 Loader 分析
+
+详情查看：[FAQ](../more/faq#nextjs)
+
+### Vue 项目
+
+在配置文件中初始化 `@rsdoctor/webpack-plugin` 或 `@rsdoctor/rspack-plugin` 插件，以下是使用 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, [
+        {
+          // 插件选项
+        },
+      ]);
+    },
+  },
+});
+```
+
+- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
+
+#### 📢 Vue 项目使用注意
+
+由于目前不支持对 `vue-loader` 进行分析，对于 Vue 项目，默认情况下禁用了 loader 分析。但是，仍然可以进行插件和构建产物的分析。
+
+---
+
+## 第三步：执行构建
+
+现在你可以在项目内执行 **build** 命令，在完成构建后，Rsdoctor 会自动打开本次构建的分析页面。
+
+```bash
+# 开启 Rsdoctor
+RSDOCTOR=true npm run build
+
+# 未开启 Rsdoctor
+npm run build
+```
+
+:::tip
+Rsdoctor 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
+:::

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

@@ -24,186 +24,6 @@ import { PackageManagerTabs } from '@theme';
 
 ---
 
-## 第二步：注册插件
+import QuickStartShared from './quick-start-shared.mdx';
 
-依赖安装完成后，你需要在项目中接入 Rsdoctor 插件，下面是一些常见工具和框架的示例：
-
-### Rspack 项目
-
-在 `rspack.config.js` 的 [plugins](https://www.rspack.dev/config/plugins.html#plugins) 中初始化 RsdoctorRspackPlugin 插件，参考：
-
-```js title="rspack.config.js"
-const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
-
-module.exports = {
-  // ...
-  plugins: [
-    // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
-    process.env.RSDOCTOR &&
-      new RsdoctorRspackPlugin({
-        // 插件选项
-      }),
-  ].filter(Boolean),
-};
-```
-
-- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
-
-### Rsbuild 项目
-
-在 `rsbuild.config.ts` 的 [tools.rspack](https://rsbuild.dev/config/tools/rspack) 中初始化 RsdoctorWebpackPlugin 插件，参考：
-
-```js title="rsbuild.config.ts"
-import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
-
-export default {
-  // ...
-  tools: {
-    rspack(config, { appendPlugins }) {
-      // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
-      if (process.env.RSDOCTOR) {
-        appendPlugins(
-          new RsdoctorRspackPlugin({
-            // 插件选项
-          }),
-        );
-      }
-    },
-  },
-};
-```
-
-- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
-
-### Webpack 项目
-
-在 `webpack.config.js` 的 [plugins](https://webpack.js.org/configuration/plugins/#plugins) 中初始化 RsdoctorWebpackPlugin 插件，参考：
-
-```js title="webpack.config.js"
-const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
-
-module.exports = {
-  // ...
-  plugins: [
-    // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
-    process.env.RSDOCTOR &&
-      new RsdoctorWebpackPlugin({
-        // 插件选项
-      }),
-  ].filter(Boolean),
-};
-```
-
-- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
-
-### Modern.js 项目
-
-在 `modern.config.ts` 的 [tools.bundlerChain](https://modernjs.dev/configure/app/tools/rspack) 中初始化插件，参考：
-
-```ts title="modern.config.ts"
-import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
-
-export default {
-  // ...
-  tools: {
-    rspack(config, { appendPlugins }) {
-      // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
-      if (process.env.RSDOCTOR) {
-        appendPlugins(
-          new RsdoctorRspackPlugin({
-            // 插件选项
-          }),
-        );
-      }
-    },
-  },
-};
-```
-
-- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
-
-:::tip
-对于使用 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"
-import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
-
-export default {
-  // ...
-  webpack: (config, { isServer }) => {
-    config.plugins.push(
-      new RsdoctorWebpackPlugin({
-        // 插件选项
-      }),
-    );
-    return config;
-  },
-};
-```
-
-- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
-
-#### 📢 Next.js 项目使用注意
-
-1. Next.js 项目报告页面问题
-
-详情查看：[FAQ](../more/faq#nextjs)
-
-2. Next.js 中不支持对 rules 进行重写的 Loader 分析
-
-详情查看：[FAQ](../more/faq#nextjs)
-
-### Vue 项目
-
-在配置文件中初始化 `@rsdoctor/webpack-plugin` 或 `@rsdoctor/rspack-plugin` 插件，以下是使用 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, [
-        {
-          // 插件选项
-        },
-      ]);
-    },
-  },
-});
-```
-
-- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
-
-#### 📢 Vue 项目使用注意
-
-由于目前不支持对 `vue-loader` 进行分析，对于 Vue 项目，默认情况下禁用了 loader 分析。但是，仍然可以进行插件和构建产物的分析。
-
----
-
-## 第三步：执行构建
-
-现在你可以在项目内执行 **build** 命令，在完成构建后，Rsdoctor 会自动打开本次构建的分析页面。
-
-```bash
-# 开启 Rsdoctor
-RSDOCTOR=true npm run build
-
-# 未开启 Rsdoctor
-npm run build
-```
-
-:::tip
-Rsdoctor 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
-:::
+<QuickStartShared />

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

@@ -27,9 +27,9 @@ plugin 耗时中会计算 Rsdoctor 的内部插件耗时。
 
 ## 使用说明
 
-### View Builder Config
+### View Bundler Config
 
-如果我们需要查看项目的 Webpack 配置，则可以通过点击卡片右上角的 `View Builder Config`，页面会弹出一个浮层，其中包含被序列化后的 **Builder Config**，如下图所示：
+如果我们需要查看项目的 Rspack 或 Webpack 配置，则可以通过点击卡片右上角的 `View Bundler Config`，页面会弹出一个浮层，其中包含被序列化后的 **Bundler Config**，如下图所示：
 
 <img
   src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/plugins-analysis-config.png"

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

@@ -28,9 +28,9 @@
 
 ## 使用说明
 
-### View Builder Config
+### View Bundler Config
 
-如果我们需要查看项目的 Webpack 配置，则可以通过点击卡片右上角的 `View Builder Config`，页面会弹出一个浮层，其中包含被序列化后的 [Webpack Config](https://webpack.js.org/configuration/)，如下图所示：
+如果我们需要查看项目的 Rspack 或 Webpack 配置，则可以通过点击卡片右上角的 `View Bundler Config`，页面会弹出一个浮层，其中包含被序列化后的 [Bundler Config](https://webpack.js.org/configuration/)，如下图所示：
 
 <img
   src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/project-overall-config.jpg"

package/package.json

@@ -1,11 +1,6 @@
 {
   "name": "@rsdoctor/docs",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "rspress dev",
-    "build": "rspress build",
-    "preview": "rspress preview"
-  },
+  "version": "0.1.9-beta.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/web-infra-dev/rsdoctor",
@@ -20,25 +15,30 @@
   ],
   "publishConfig": {
     "access": "public",
-    "provenance": false,
+    "provenance": true,
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@rsdoctor/types": "workspace:*",
     "@types/node": "^16",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "rsbuild-plugin-google-analytics": "^1.0.0",
     "rspress-plugin-font-open-sans": "^1.0.0",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "@rsdoctor/types": "0.1.9-beta.1"
   },
   "dependencies": {
     "framer-motion": "^10.17.6",
     "react-markdown": "^9.0.1",
     "rsfamily-nav-icon": "^1.0.2",
-    "rspress": "^1.15.1",
+    "rspress": "^1.16.1",
     "tailwindcss": "^3.4.0"
+  },
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
   }
-}
+}