指南
配置
插件
API
教程
社区
指南
配置
插件
API
教程
社区
简体中文

使用 Rsdoctor

Rsdoctor 是一个支持 Webpack 及 Rspack 构建分析工具。在 Modern.js 中，我们推荐使用 Rsdoctor 来对构建过程与构建产物进行诊断和分析。

安装依赖

根据项目是 Rspack 或 Webpack 构建，选择对应的插件安装。

Rspack 插件

npm
yarn
pnpm
bun
npm add @rsdoctor/rspack-plugin -D

Webpack 插件

npm
yarn
pnpm
bun
npm add @rsdoctor/webpack-plugin -D

注册插件

在 modern.config.ts 中，你可以通过 tools.bundlerChain 来注册 Rspack 或 Webpack 插件，参考：

modern.config.ts
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

export default {
  // ...
  tools: {
    rspack(config, { appendPlugins }) {
      // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
      if (process.env.RSDOCTOR) {
        appendPlugins(
          new RsdoctorRspackPlugin({
            // 插件选项
          }),
        );
      }
    },
  },
};
NOTE

上述代码是使用 Rspack 时的示例，如果使用 Webpack 请自行切换插件。

执行构建

在你可以在项目内执行 build 命令，在完成构建后，Rsdoctor 会自动打开本次构建的分析页面。

RSDOCTOR=true npm run build

相关文档

更多内容请查阅 Rsdoctor 官网文档。