Quick start#

This document will explain how to access the Rsdoctor ability.

Step 1: install dependencies#

Rspack projects#

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

npm add @rsdoctor/rspack-plugin -D

Webpack projects#

For projects based on webpack, install the following dependencies:

npm add @rsdoctor/webpack-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.

Webpack#

Initialize the RsdoctorWebpackPlugin in the plugins of 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.

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(RsdoctorWebpackPlugin) plugin in the Rspack Config(webpack 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

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

"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/webpack-plugin or @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