Use Rsdoctor#

Rsdoctor is a build analyzer that can visually display the build process, such as compilation time, code changes before and after compilation, module reference relationships, duplicate modules, etc.

If you need to debug the build outputs or build process, you can use Rsdoctor for troubleshooting.

• Rsdoctor is a one-stop tool for diagnosing and analyzing the build process and build artifacts.
• Rsdoctor is a tool that supports Webpack and Rspack build analysis.
• Rsdoctor is an analysis tool that can display the time-consuming and behavioral details of the compilation.
• Rsdoctor is a tool that can analyze the time-consuming and compilation process of the rspack builtin:swc-loader.

🔥 Features#

• Compilation Visualization: Rsdoctor visualizes the compilation behavior and time consumption, making it easy to view build issues.

• Multiple Analysis Capabilities: Rsdoctor supports build artifact, build-time analysis, and anti-degradation capabilities:

  • Build artifact support for resource lists and module dependencies, etc.
  • Build-time analysis supports Loader, Plugin, and Resolver building process analysis, including: Rspack's builtin:swc-loader.
  • Build rules support duplicate package detection and ES Version Check, etc.

• Support Custom Rules: In addition to built-in build scan rules, Rsdoctor also supports users adding custom component scan rules based on the build data of Rsdoctor.

Quick Start#

In an Rspeedy-based project, you can enable Rsdoctor as follows:

# dev
RSDOCTOR=true rspeedy dev

# build
RSDOCTOR=true rspeedy build

After running the above commands, Rspeedy will automatically register the Rsdoctor plugin, and after the build is completed, it will open the build analysis page. For complete features, please refer to Rsdoctor document.

Options#

If you need to configure the options provided by the Rsdoctor plugin, use tools.rsdoctor.

import { defineConfig } from '@lynx-js/rspeedy';

export default defineConfig({
  tools: {
    rsdoctor: {
      disableClientServer: true,
    },
  },
});

Use custom Rsdoctor version#

1. Install the Rsdoctor plugin:

npm add @rsdoctor/rspack-plugin -D

2. Add the RsdoctorRspackPlugin to lynx.config.ts

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

export default {
  tools: {
    rspack(config, { appendPlugins }) {
      if (process.env.RSDOCTOR === 'true') {
        appendPlugins(
          new RsdoctorRspackPlugin({
            // plugin options
            supports: { banner: true },
          }),
        );
      }
    },
  },
};

Please note that tools.rsdoctor has no effect when using a custom version of Rsdoctor.