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#

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

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.

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

📢 Note#

Next.js Projects#

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

1. Next.js Project Reporting Page Issues#

For more details, see: FAQ

2. Loader Analysis with Rules Overriding Not Supported in Next.js#

For more details, see: FAQ