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
yarn
pnpm
bun
npm add @rsdoctor/rspack-plugin -D

Webpack Projects

TIP

Not supported in Webpack 4.

For projects based on Webpack, install the following dependencies:

npm
yarn
pnpm
bun
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:

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:

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:

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:

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

For projects using Modern.js Webpack mode, please register the RsdoctorWebpackPlugin plugin through tools.webpack.

Next.js Framework

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

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

  1. 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:

rsbuild.config.ts
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
TIP

The Rsdoctor plugin provides some configurations, please refer to Options.