#Quick start

This document will explain how to access the Rsdoctor ability.

#Step 1: install dependencies

#Rspack projects

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

npm add @rsdoctor/rspack-plugin -D

yarn add @rsdoctor/rspack-plugin -D

pnpm add @rsdoctor/rspack-plugin -D

bun add @rsdoctor/rspack-plugin -D

deno add npm:@rsdoctor/rspack-plugin -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 the RsdoctorRspackPlugin in the plugins of 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.

#Rsbuild

Rsbuild has built-in support for Rsdoctor, so you don't need to manually register plugins. See Rsbuild - Use Rsdoctor for more details.

#Modern.js

Initialize the plugin in the tools.rspack of 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.

#Next.js

#Step 1: Register the Rsdoctor plugin

Initialize the RsdoctorRspackPlugin plugin in the Rspack Config of next.config.ts.

import type { NextConfig } from 'next';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

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.

#Step 2: Execute build

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

npm run build

yarn run build

pnpm run build

bun run build

deno run npm:build

#Step 3: Open the report

After installing @rsdoctor/cli, add the following scripts commands to package.json, executing client:rsd or server:rsd can open the report of the corresponding builder:

npm add @rsdoctor/cli -D

yarn add @rsdoctor/cli -D

pnpm add @rsdoctor/cli -D

bun add @rsdoctor/cli -D

deno add npm:@rsdoctor/cli -D

  "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 to reopen the report page without re-executing the build operation. The specific method is shown in the third step 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:

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

#Vue project

Initialize the @rsdoctor/rspack-plugin plugin in the configuration file. Here is an example using rsbuild:

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.

#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.

# Enable Rsdoctor
RSDOCTOR=true npm run build

# Disable Rsdoctor
npm run build