> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Quick start

This guide explains how to add Rsdoctor to your project.

## Requirements

- Node.js `^20.19.0 || >=22.12.0`
- Rspack 2.0 or later. Rsdoctor 2.0 does not support Rspack 1.x.

## Step 1: install dependencies

### Rspack projects

For projects based on Rspack, such as Rsbuild or Rslib, install the following dependencies:


```sh [npm]
npm add @rsdoctor/core -D
```

```sh [yarn]
yarn add @rsdoctor/core -D
```

```sh [pnpm]
pnpm add @rsdoctor/core -D
```

```sh [bun]
bun add @rsdoctor/core -D
```

```sh [deno]
deno add npm:@rsdoctor/core -D
```

***

## 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 `RsdoctorRspackPlugin` in the [plugins](https://www.rspack.rs/config/plugins.html#plugins) of `rspack.config.mjs`:

```js title="rspack.config.mjs"
import { RsdoctorRspackPlugin } from '@rsdoctor/core';

export default {
  // ...
  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.md).

### Rsbuild

Rsbuild has built-in support for Rsdoctor, so you don't need to manually register plugins. See [Rsbuild - Use Rsdoctor](https://rsbuild.rs/guide/debug/rsdoctor) for more details.

### Modern.js

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/core';

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.md).

### Next.js

#### Step 1: register the Rsdoctor plugin

Initialize the [RsdoctorRspackPlugin](#rspack) plugin in the [Rspack Config](https://rspack.rs/guide/tech/next) of `next.config.ts`.

```ts title="next.config.ts"
import type { NextConfig } from 'next';
import { RsdoctorRspackPlugin } from '@rsdoctor/core';

const nextConfig: NextConfig = {
  /* config options here */
  webpack: (config) => {
    if (config.name === 'client') {
      config.plugins.push(
        new RsdoctorRspackPlugin({
          disableClientServer: true,
        }),
      );
    } else if (config.name === 'server') {
      config.plugins.push(
        new RsdoctorRspackPlugin({
          disableClientServer: true,
          output: {
            reportDir: './.next/server',
          },
        }),
      );
    }
    return config;
  },
};

export default nextConfig;
```

- **Options:** The plugin provides some configuration options, please refer to [Options](/config/options/options.md).

#### Step 2: execute build

Execute the **build** command, Rsdoctor will generate the corresponding report data in the local repository artifacts.


```sh [npm]
npm run build
```

```sh [yarn]
yarn run build
```

```sh [pnpm]
pnpm run build
```

```sh [bun]
bun run build
```

```sh [deno]
deno run npm:build
```

#### Step 3: open the report

After installing [@rsdoctor/cli](/guide/start/cli.md), add the following scripts commands to **package.json**, executing **client:rsd** or **server:rsd** can open the report of the corresponding builder:


```sh [npm]
npm add @rsdoctor/cli -D
```

```sh [yarn]
yarn add @rsdoctor/cli -D
```

```sh [pnpm]
pnpm add @rsdoctor/cli -D
```

```sh [bun]
bun add @rsdoctor/cli -D
```

```sh [deno]
deno add npm:@rsdoctor/cli -D
```

```ts
  "scripts": {
    "client:rsd": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json", // Rsdoctor's client report
    "server:rsd": "rsdoctor analyze --profile .next/server/.rsdoctor/manifest.json" // Rsdoctor's server report
  }
```

#### 📢 Note for Next.js

After Next.js finishes executing the `build` command, it will terminate the terminal service, causing the report page server run by Rsdoctor during the build process to close. To solve this problem, you can use [@rsdoctor/cli](/guide/start/cli.md) to reopen the report page without re-executing the build operation. The specific method is shown in the [third step](#step-3-open-the-report) or by locally executing the rsdoctor command:

For example, if Rsdoctor's build output is located at the path `.next/server/chunks/.rsdoctor/manifest.json`, you can open the report page by executing the following command:

```bash
rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json

```

### Vue project

Import `RsdoctorRspackPlugin` from `@rsdoctor/core` and initialize it 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/core';

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.md).

***

## Step 3: execute 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.md).
:::