import { PackageManagerTabs } from '@theme';

# 使用 Rsdoctor

Rsdoctor 是一个支持 Webpack 及 Rspack 构建分析工具。在 Modern.js 中，我们推荐使用 Rsdoctor 来对构建过程与构建产物进行诊断和分析。

## 安装依赖

根据项目是 Rspack 或 Webpack 构建，选择对应的插件安装。

### Rspack 插件

<PackageManagerTabs command="add @rsdoctor/rspack-plugin -D" />

### Webpack 插件

<PackageManagerTabs command="add @rsdoctor/webpack-plugin -D" />

## 注册插件

在 `modern.config.ts` 中，你可以通过 `tools.bundlerChain` 来注册 Rspack 或 Webpack 插件，参考：

```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({
            // 插件选项
          }),
        );
      }
    },
  },
};
```

:::note
上述代码是使用 Rspack 时的示例，如果使用 Webpack 请自行切换插件。
:::

## 执行构建

在你可以在项目内执行 build 命令，在完成构建后，Rsdoctor 会自动打开本次构建的分析页面。

```bash
RSDOCTOR=true npm run build
```

## 相关文档

更多内容请查阅 [Rsdoctor 官网文档](https://rsdoctor.dev/)。
