Using Rsdoctor#

Rsdoctor is a build analysis tool that supports both Webpack and Rspack. In Modern.js, we recommend using Rsdoctor to diagnose and analyze the build process and build outputs.

Install Dependencies#

Depending on whether your project uses Rspack or Webpack, choose the corresponding plugin installation.

Rspack Plugin#

npm add @rsdoctor/rspack-plugin -D

Webpack Plugin#

npm add @rsdoctor/webpack-plugin -D

Register Plugin#

In modern.config.ts, you can register the Rspack or Webpack plugin via tools.bundlerChain. Refer to the example below:

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 build time.
      if (process.env.RSDOCTOR) {
        appendPlugins(
          new RsdoctorRspackPlugin({
            // Plugin options
          }),
        );
      }
    },
  },
};

Execute Build#

You can execute the build command within your project. After the build is complete, Rsdoctor will automatically open the analysis page for the build.

RSDOCTOR=true npm run build

Related Documentation#

For more information, please refer to the Rsdoctor Website.