#FAQ

#如何只使用 Rsdoctor 的某个功能？

当只需要 Rsdoctor 内的 Bundle Size 分析产物大小功能时，可以在 Rsdoctor 插件配置时添加对应的 features 配置项，参考下方代码：

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

new RsdoctorRspackPlugin({
  features: ['bundle'], // 代表只开启 bundle size 的功能分析
});

#Loader 耗时数据不准？

Rsdoctor 提供的 Loader 耗时是预估耗时。无法统计到准确耗时是因为 Loader 执行可能是异步函数也可能是同步函数，打包工具会并行执行多个不冲突的 Loader 函数，而 JavaScript 是单线程的，多个 Loader 函数均可能抢占当前的任务队列，且 Loader 函数内的异步逻辑无法识别，导致单个 Loader 函数在执行过程中可能横跨多个其他 Loader 的执行过程，因此会存在如下图所示的三种情况：

因此，Rsdoctor 提供的 Loader 耗时是一个预估的数据，我们给出的耗时数据准确反映了上图中情况 1 和情况 2，对于情况 3 的解决方案，我们目前还在探索中。

#使用 Rsdoctor 构建时出现了 out of memory 问题

如果出现了 out of memory 的报错，可以尝试下列两个方法，推荐优先使用第一个：

#方法一

增大 Node.js 内存上限，例如：NODE_OPTIONS=--max-old-space-size=8096。

#方法二

这个问题多是因为构建过程中存储了源码信息，超过了内存限制，可以在 output.reportCodeType 中配置 noCode 或 noAssetsAndModuleSource 字段来缓解此问题。output.reportCodeType

#产物分析中，Module 都没有 Bundled/Parsed Size 怎么办？

#问题说明

Source Size 和 Bundled Size 的区别：

• Source Size：Module 文件源码的原始大小（如下图青色标识）。
• Bundled Size：经过打包及压缩后的 Module 的最终代码大小（如下图蓝色标识）。\
• Gzip Size：经过 gzip 压缩后的 Module 的最终代码大小（如下图黄色标识）。

#解决方案

如果只有 Source Size，没有 Bundled Size，或者 Tree Map 中没有 Module 下钻（即没有 Modules 分块），则需要手动开启 SourceMap。注意只在 Rsdoctor 开启时打开 SourceMap，不要影响线上产物。

• 下面情况就需要手动开启 Sourcemap

配置示例：

export default {
  devtool: 'cheap-source-map', // 或其他 devtool 配置
};

Rsdoctor 支持以下 SourceMap 配置：

• source-map
• hidden-source-map
• inline-source-map
• cheap-source-map
• cheap-module-source-map
• nosources-source-map

#产物分析界面没有 Bundled Size 怎么办？

#问题说明

Source Size 和 Bundled Size 的区别：

• Source Size：Module 文件源码的原始大小（如下图紫色标识）。
• Bundled Size：经过打包及压缩后的 Module 的最终代码大小（如下图青色标识）。

#原因分析

当 optimization.concatenateModules 配置为 true 时，Rsdoctor 无法通过 acorn 解析产物来分解出每个 Module 的实际代码大小，因此无法显示 Bundled Size。

#解决方案

在开启 Rsdoctor 分析时，配置 concatenateModules 为 false，如下所示。同时要注意，关闭 concatenateModules 一定会导致产物体积略微变大，与线上环境的体积有一些差异。

export default {
  optimization: {
    concatenateModules:
      process.env.NODE_ENV === 'production' && !process.env.RSDOCTOR, // 需要判断 RSDOCTOR 环境变量，不可以直接修改 concatenateModules！
  },
};

• rspeedy 项目中，在 rspeedy.config.ts 中配置：

export default {
  tools: {
    rspack(config, { env }) {
      if (process.env.RSDOCTOR === 'true') {
        config.optimization = {
          ...config.optimization,
          concatenateModules: false,
        };
        return config;
      }
    },
  },
};

#CssExtractRspackPlugin 的 loader 耗时过长问题

在使用 Rsdoctor 对 Rspack 项目进行编译耗时分析时，可能会发现 CssExtractRspackPlugin 的 loader 耗时较长。然而，这个数值并不代表 CssExtractRspackPlugin 的 loader 的真实耗时，它还包含了对本模块编译的其他 loader 的耗时。

• 原因：CssExtractRspackPlugin 中的 loader 在 pitch 阶段会异步调用其他 loader，并等待这些 loader 执行后的回调结果。因此，CssExtractRspackPlugin 的耗时实际上包括了其他 loader 的执行时间和空闲时间。

#在 Re.Pack 或自定义 Bundle 扩展名项目中使用 Rsdoctor

Rsdoctor 现在支持标准 .js 扩展名之外的自定义 JavaScript bundle 文件扩展名。这对于使用 .bundle 扩展名的 Re.Pack 等项目特别有用。

#支持的扩展名

默认情况下，Rsdoctor 识别以下 JavaScript bundle 扩展名：

• .js - 标准 JavaScript 文件
• .bundle - Re.Pack 和其他自定义打包工具

#无需配置

如果您的项目生成带有 .bundle 扩展名的 bundle 文件（例如 main.bundle、vendor.bundle），Rsdoctor 将自动：

• 解析和分析 .bundle 文件以及 .js 文件
• 在 Bundle 分析图表中显示 .bundle 文件
• 在 JavaScript 资源统计中包含 .bundle 资源
• 支持 .bundle 文件的 source map 分析

#工作原理

检测逻辑已在以下领域更新：

1. Bundle 解析：parseBundle 函数现在在分析 bundle 内容时接受 .js 和 .bundle 扩展名。
2. 资源过滤：资源摘要和过滤函数将 .bundle 文件视为 JavaScript 资源。
3. 文件类型检测：所有文件扩展名匹配工具都包含 .bundle 作为公认的 JavaScript 扩展名。

#用例示例

Re.Pack 项目通常生成带有 .bundle 扩展名的 bundle：

dist/
  ├── index.bundle        ← 现已支持！
  ├── vendor.bundle       ← 现已支持！
  ├── styles.css
  └── assets/

Rsdoctor 将自动检测和分析这些 .bundle 文件，无需任何额外配置。