使用 Rsdoctor#

Rsdoctor 是一个构建分析工具，可以直观地显示构建过程，例如编译时间、编译前后的代码变化、模块引用关系、重复模块等。

如果你需要调试构建输出或构建过程，可以使用 Rsdoctor 进行问题排查。

• Rsdoctor 是一个一站式工具，用于诊断和分析构建过程和构建产物
• Rsdoctor 支持 Webpack 和 Rspack 构建分析的工具
• Rsdoctor 支持显示编译时间和行为细节的分析
• Rsdoctor 支持分析 rspack 内置的 swc-loader 编译时间和过程

🔥 特性#

• 编译可视化: Rsdoctor 可视化编译行为和时间消耗，使查看构建问题变得容易。

• 多种分析能力: Rsdoctor 支持构建产物、构建时间分析和防退化能力：

  • 构建产物支持资源列表和模块依赖等。
  • 构建时间分析支持加载器、插件和解析器的构建过程分析，包括：Rspack 的内置 swc-loader。
  • 构建规则支持重复包检测和 ES 版本检查等。

• 支持自定义规则: 除了内置的构建扫描规则外，Rsdoctor 还支持用户根据 Rsdoctor 的构建数据添加自定义组件扫描规则。

快速开始#

在基于 Rspeedy 的项目中，你可以按如下方式启用 Rsdoctor：

# dev
RSDOCTOR=true rspeedy dev

# prod
RSDOCTOR=true rspeedy build

运行上述命令后，Rspeedy 将自动注册 Rsdoctor 插件，并在构建完成后打开构建分析页面。有关完整功能，请参阅 Rsdoctor 文档。

选项#

如果你需要配置选项 provided by the Rsdoctor plugin, use tools.rsdoctor.

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

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

使用特定 Rsdoctor 版本#

1. 安装 Rsdoctor 插件

npm add @rsdoctor/rspack-plugin -D

2. 添加 RsdoctorRspackPlugin 到 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 },
          }),
        );
      }
    },
  },
};

请注意，当使用自定义版本的 Rsdoctor 时，tools.rsdoctor 配置项将不起作用。