Options 配置

RsdoctorRspackPlugin 插件

RsdoctorRspackPlugin 类由 @rsdoctor/rspack-plugin 导出,配置项是 RsdoctorRspackPluginOptions

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

new RsdoctorRspackPlugin({
  /** RsdoctorRspackPluginOptions */
});

RsdoctorWebpackPlugin 插件

RsdoctorWebpackPlugin 类由 @rsdoctor/webpack-plugin 导出,配置项是 RsdoctorWebpackPluginOptions

cjs
esm
const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');

new RsdoctorWebpackPlugin({
  /** RsdoctorWebpackPluginOptions */
});

Options

类型: Object

这个 OptionsRsdoctorWebpackPluginRsdoctorRspackPlugin 的配置项。它包含以下属性值:

disableClientServer

  • Type: boolean
  • Optional: true
  • Default: false
TIP

建议在 CI 环境下将 disableClientServer 设置为 true,否则启动的服务会卡住 pipeline 流程.

是否需要自动打开 Rsdoctor 报告页面。如果你不需要在浏览器内查看本次 Rsdoctor 提供的分析报告,则可以开启这个配置项。

features

features values

features 属性是用于分析功能开关的,具体的功能项如下:

  • loader:Loaders 耗时及代码编译变化分析,默认开启。
  • plugins:Plugins 调用以及耗时分析,默认开启。
  • bundle:构建产物分析,默认开启。
  • resolver:resolver 分析,默认关闭。
  • lite: (废弃,使用 mode.lite) lite 模式。lite 模式和普通模式的区别就是不再展示源码信息,只展示打包后的代码信息,这样分析页面上的代码也将是打包后的。默认普通模式。

所以,默认配置是开启了 Bundle 分析能力、 Loader he Plugin 构建时分析。没有开启 Resolver 分析能力, Rspack 暂不支持 Resolver 分析能力。

TIP

如果出现了 out of memory 的报错,可以尝试:

  1. 打开 lite 模式。
  2. 增大 node 内存上限,例如:NODE_OPTIONS=--max-old-space-size=8096。
  • 原因:因为构建过程中,缓存了源码信息,超过了内存,所以开启 lite 模式可以缓解。
  • 区别:lite 模式和普通模式的区别就是不再缓存源码信息,只缓存打包后的代码信息,这样分析页面上的代码也将是打包后的。

features types

  • 如果你将 features 设置为数组类型,该插件只会开启你在 features 数组中定义的功能。
  • 如果你将 features 设置为简单对象类型,该插件只会关闭你在 features 对象中值为 false 的功能。

RsdoctorWebpackPluginFeatures

features 类型如下:

interface RsdoctorWebpackPluginFeatures {
  /**
   * turn off it if you need not to analyze the executions of webpack loaders.
   * @default true
   */
  loader?: boolean;
  /**
   * turn off it if you need not to analyze the executions of webpack plugins.
   * @default true
   */
  plugins?: boolean;
  /**
   * turn off it if you need not to analyze the executions of resolver.
   * @default false
   */
  resolver?: boolean;
  /**
   * turn off it if you need not to analyze the output bundle.
   * @default true
   */
  bundle?: boolean;
  /**
   * turn on it if you just use lite mode. This mode do not have source codes.
   * @default false
   * @deprecated
   */
  lite?: boolean;
}

RsdoctorRspackPluginFeatures

features 类型如下:

interface RsdoctorRspackPluginFeatures {
  /**
   * turn off it if you need not to analyze the executions of webpack loaders.
   * @default true
   */
  loader?: boolean;
  /**
   * turn off it if you need not to analyze the executions of webpack plugins.
   * @default true
   */
  plugins?: boolean;
  /**
   * turn off it if you need not to analyze the output bundle.
   * @default true
   */
  bundle?: boolean;
  /**
   * turn on it if you just use lite mode. This mode do not have source codes.
   * @default false
   * @deprecated
   */
  lite?: boolean;
}

mode

Version: 0.4.0
  • Type: normal | brief | lite
  • Optional: true
  • Default: normal

选择使用的 Rsdoctor 构建报告模式,有以下几种:

  • normal 模式: 在构建产物目录中生成一个 .rsdoctor 文件夹,其中包含各种数据文件,并在报告页面中展示代码。输出目录可以通过 reportDir 进行配置。

  • brief 模式: 在构建产物目录的 .rsdoctor 文件夹中生成一个 HTML 报告文件,所有构建分析数据会整合注入到这个 HTML 文件中,可以通过浏览器打开该 HTML 文件查看报告。brief 模式还有更多配置项,详细信息请参阅:brief.

  • lite 模式: 基于普通模式,不展示源码和产物代码,仅显示打包后的代码信息。

reportDir

Version: 0.4.0
  • Type: string
  • Optional: true
  • Default: undefined

Rsdoctor 报告输出目录,默认是构建产物输出目录。

brief

Version: 0.4.0
  • Type: BriefType
  • Optional: true
  • Default: undefined

Brief 模式更多配置,如下:

  • reportHtmlName: 配置 Brief 的 HTML 报告的名称,默认 report-rsdoctor.html
  • writeDataJson: 默认 Brief 模式下将分析数据注入到 HTML 文件中,所以不会再产生构建分析数据。如果想要而外本地生成数据则需要配置 writeDataJson: true

briefType

interface BriefConfig {
  reportHtmlName?: string | undefined;
  writeDataJson: boolean;
}

reportCodeType

  • Type: { noModuleSource?: boolean; noAssetsAndModuleSource?: boolean }

  • Optional: true

  • Default: undefined

  • Description

    • 选择输出的分析数据:
      • 默认是所有完整数据;
      • noModuleSource: true 是输出除了 module 代码之外的数据,Module 代码即 Bundle 内一个一个文件的打包模块代码。
      • noAssetsAndModuleSource: true 是输出除了 module 代码和 Assets 产物代码之外的数据。
  • Example

new RsdoctorRspackPlugin({
  reportCodeType: { noModuleSource: true } // { noAssetsAndModuleSource: true }
}),

supports

该选项是配置 Rsdoctor 是否开启某些细节特性分析能力支持的,例如:是否开启对 BannerPlugin 的兼容能力。

supportsTypes

type ISupport = {
  banner?: boolean;
  parseBundle?: boolean;
  generateTileGraph?: boolean;
};
DANGER

开启 BannerPlugin 分析时,请勿在生产版本中使用 Rsdoctor。

  • default: true.
  • type: boolean.

如果开启 supports.banner 则会开启 Rsdoctor 对 BannerPlugin 的兼容逻辑。详细请看:支持 BannerPlugin

parseBundle

  • default: true.
  • type: boolean.

在部分大型仓库中,反解 Bundle 解析执行耗时过大,这是因为 Parse Bundle 的分析利用了 AST 解析与处理。当产物文件过多时,耗时也会增加。如果不需要此功能,可以通过 supports.parseBundle 配置进行选择性关闭。示例如下:

chain.plugin('Rsdoctor').use(RsdoctorRspackPlugin, [
  {
    supports: {
      parseBundle: false,
    },
  },
]);

关闭 Parse Bundle 能力只会影响是否能查看到 Bundle 中 Module 的最终打包大小(Bundled Size)及最终打包代码(Bundled Code):

generateTileGraph

  • default: true. 在 rspack 中默认值是 false。
  • type: boolean.

是否开启生成瓦片图的能力,影响是 Bundle Size 页面中是否有 webpack-bundle-analyzer 的瓦片图。

port

  • Type: number
  • Optional: true
  • Default: random(3000, 8999)

配置 Rsdoctor 服务的端口。