使用 Rsdoctor#

Rsdoctor 是一个针对 Rspack 的构建分析器，可以直观地展示构建过程，例如编译时间、编译前后的代码变化、模块引用关系、重复模块等。如果您需要排查构建产物或构建时编译问题，可以使用 Rsdoctor。

💡 什么是 Rsdoctor？#

• Rsdoctor 是一个面向构建过程与构建产物提供诊断和分析的一站式工具。
• Rsdoctor 是一个支持 Rspack 或 webpack 构建分析工具。
• Rsdoctor 是一个可以展示编译耗时及编译行为细节的分析工具。
• Rsdoctor 是一个可以支持 Rspack builtin:swc-loader 构建耗时及构建行为分析的工具

🔥 特性#

• 编译可视化：Rsdoctor 将编译行为及耗时进行可视化展示，方便开发者查看构建问题。

• 多种分析能力：支持构建产物、构建时分析能力：
  • 构建产物支持资源列表及模块依赖等。
  • 构建时分析支持 Loader、Plugin、Resolver 构建过程分析。
  • 支持 Rspack 的 builtin:swc-loader 分析。
  • 构建规则支持重复包检测及 ES Version Check 检查等。
• 支持自定义规则：除了内置构建扫描规则外，还支持用户根据 Rsdoctor 的构建数据添加自定义构建扫描规则。
• 框架无关：支持所有基于 Rspack 或 webpack 构建的项目。

特性详情#

更详细的特性使用介绍你可以查看这篇文档 Rsdoctor Features。

产物分析#

你可以利用 Rsdoctor 分析 Rspack 的构建产物.

编译分析#

Rsdoctor 是一个构建分析工具，可以直观地展示每个 loader 和 plugin 的编译时间。详细信息请参阅编译分析。

快速开始#

在使用 Rspack 的项目中，你可以使用以下方式开启 Rsdoctor：

1. 安装 RsdoctorRspackPlugin 插件：

npm add @rsdoctor/rspack-plugin -D

2. 注册 RsdoctorRspackPlugin 插件：

在 rspack.config.js 的 plugins 中初始化 RsdoctorRspackPlugin 插件，参考：

const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');

module.exports = {
  // ...
  plugins: [
    // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
    process.env.RSDOCTOR &&
      new RsdoctorRspackPlugin({
        // 插件选项
      }),
  ].filter(Boolean),
};

3. 在构建命令之前添加 RSDOCTOR=true 变量：

# dev
RSDOCTOR=true rspack serve

# build
RSDOCTOR=true rspack build

运行上述命令后，会在构建完成后打开构建分析页面。完整功能请参考 Rsdoctor 文档。

4. [可选] 配置 Options

你可以参照这篇文档 options 对 RsdoctorRspackPlugin 进行参数配置。