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.

Next.js Framework#

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

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

export default {
  // ...
  webpack: (config, { isServer }) => {
    config.plugins.push(
      new RsdoctorWebpackPlugin({
        // plugin options
      }),
    );

    return config;
  },
};

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

📢 Next.js Project Notice#

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

Vue Framework#

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.

📢 Vue Project Notice#

Because vue-loader analysis is not supported at the moment, loader analysis is disabled by default for Vue projects. However, plugin and build artifact analysis can still be performed.

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