import { PackageManagerTabs } from '@theme';

# Using Rsdoctor

Rsdoctor is a build analysis tool that supports both Webpack and Rspack. In Modern.js, we recommend using Rsdoctor to diagnose and analyze the build process and build outputs.

## Install Dependencies

Depending on whether your project uses Rspack or Webpack, choose the corresponding plugin installation.

### Rspack Plugin

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

### Webpack Plugin

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

## Register Plugin

In `modern.config.ts`, you can register the Rspack or Webpack plugin via `tools.bundlerChain`. Refer to the example below:

```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 build time.
      if (process.env.RSDOCTOR) {
        appendPlugins(
          new RsdoctorRspackPlugin({
            // Plugin options
          }),
        );
      }
    },
  },
};
```

:::note
The above code is an example of using Rspack. If you are using Webpack, please switch the plugin accordingly.
:::

## Execute Build

You can execute the build command within your project. After the build is complete, Rsdoctor will automatically open the analysis page for the build.

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

## Related Documentation

For more information, please refer to the [Rsdoctor Website](https://rsdoctor.dev/).
