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

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

Initialize the RsdoctorWebpackPlugin plugin in the Webpack Config of next.config.ts.

import type { NextConfig } from 'next';
import { RsdoctorWebpackPlugin } from '@rsdoctor/webpack-plugin';

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

export default nextConfig;

• Options: The plugin provides some configuration options, please refer to Options.

📢 Note for Next.js projects#

Since Next.js closes the terminal service after the build execution is completed, the report page server run by Rsdoctor during the build process will also be shut down. At this point, you can reopen the report page using @rsdoctor/cli without having to execute the build operation again.

• First, install @rsdoctor/cli:

npm add @rsdoctor/cli -D

• Second, add the following scripts commands to package.json, executing client:rsdoctor or server:rsdoctor can open the report for the corresponding builder:

"scripts": {
    "client:rsdoctor": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json",
    "server:rsdoctor": "rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json"
  }

For example, if Rsdoctor's build artifacts are located at the .next/server/chunks/.rsdoctor/manifest.json path, 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: run 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