#FAQ

#How to use only a specific feature of Rsdoctor?

When we only need the Bundle Size bundle size analysis feature within Rsdoctor, we can add the corresponding features option when configuring the Rsdoctor plugin. Refer to the code snippet below:

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

new RsdoctorRspackPlugin({
  features: ['bundle'], // Represents enabling only the bundle size analysis feature
});

#Loader timing data is inaccurate?

The timing data provided by Rsdoctor for loaders is an estimated time. The reason accurate timing cannot be measured is that loader execution can be both asynchronous and synchronous functions, the bundler will parallelize the execution of multiple non-conflicting loader functions, and since JavaScript is single-threaded, multiple loader functions can compete for the current task queue. Furthermore, the asynchronous logic within loader functions cannot be recognized, causing a single loader function to potentially span across the execution of multiple other loaders. As a result, there are three possible cases, as shown in the following diagram:

Therefore, the loader timing provided by Rsdoctor is an estimated value. The timing data we provide accurately reflects scenario 1 and scenario 2 from the diagram. As for scenario 3, we are still exploring solutions.

#out of memory error when using Rsdoctor for building

If you encounter an out of memory error, you can try the following two methods, with the first one being recommended:

#Method 1

Increase the Node.js memory limit, for example: NODE_OPTIONS=--max-old-space-size=8096.

#Method 2

This issue is often caused by storing source code information during the build process, which exceeds the memory limit. You can configure the noCode or noAssetsAndModuleSource field in output.reportCodeType to alleviate this issue. output.reportCodeType

#No Bundled/Parsed Size for Modules in bundle analysis?

#Issue Description

The difference between Source Size and Bundled Size:

• Source Size: The original size of the Module source code file (marked in cyan in the image below).
• Bundled Size: The final code size of the Module after bundling and minification (marked in blue in the image below).\
• Gzip Size: The final code size of the Module after gzip compression (marked in yellow in the image below).

#Solution

If you only have Source Size but no Bundled Size, or there is no Module drill-down in Tree Map (i.e., no Module chunks), you need to manually enable SourceMap. Note: Only enable SourceMap when Rsdoctor is enabled, do not affect production builds.

• The following scenario requires manually enabling SourceMap:

Configuration example:

export default {
  devtool: 'cheap-source-map', // or other devtool configuration
};

Rsdoctor supports the following SourceMap configurations:

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

#Bundle analysis page no Bundled Size?

#Issue Description

The difference between Source Size and Bundled Size:

• Source Size: The original size of the Module source code file (marked in purple in the image below).
• Bundled Size: The final code size of the Module after bundling and minification (marked in cyan in the image below).

#Root Cause

When optimization.concatenateModules is set to true, Rsdoctor cannot use acorn to parse the build artifacts and break down the actual code size of each Module, therefore it cannot display the Bundled Size.

#Solution

When enabling Rsdoctor analysis, set concatenateModules to false as shown below. Note: Disabling concatenateModules will slightly increase bundle size, creating differences from production builds.

export default {
  optimization: {
    concatenateModules:
      process.env.NODE_ENV === 'production' && !process.env.RSDOCTOR, // Must check RSDOCTOR environment variable, do not modify concatenateModules directly!
  },
};

• In the rspeedy project, configure it in rspeedy.config.ts:

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

#The loader of CssExtractRspackPlugin takes too long

When using Rsdoctor to analyze the compilation time of Rspack projects, you may find that the loader of CssExtractRspackPlugin takes a long time. However, this figure does not represent the actual time taken by the CssExtractRspackPlugin's loader; it also includes the time taken by other loaders involved in compiling this module.

• Reason: The loader in CssExtractRspackPlugin asynchronously calls other loaders during the pitch phase and waits for the callback results after these loaders execute. Therefore, the time taken by CssExtractRspackPlugin actually includes the execution time of other loaders and idle time.

#Using Rsdoctor with Re.Pack or Custom Bundle Extensions

Rsdoctor now supports custom JavaScript bundle file extensions beyond the standard .js extension. This is particularly useful for projects like Re.Pack that use .bundle extensions.

#Supported Extensions

By default, Rsdoctor recognizes the following JavaScript bundle extensions:

• .js - Standard JavaScript files
• .bundle - Re.Pack and other custom bundlers

#No Configuration Required

If your project generates bundle files with a .bundle extension (e.g., main.bundle, vendor.bundle), Rsdoctor will automatically:

• Parse and analyze .bundle files alongside .js files
• Display .bundle files in the Bundle Analyzer Graph
• Include .bundle assets in JavaScript asset statistics
• Support source map analysis for .bundle files

#How It Works

The detection logic has been updated in the following areas:

1. Bundle Parsing: The parseBundle function now accepts both .js and .bundle extensions when analyzing bundle contents.
2. Asset Filtering: Asset summary and filtering functions treat .bundle files as JavaScript assets.
3. File Type Detection: All file extension matching utilities include .bundle as a recognized JavaScript extension.

#Example Use Case

Re.Pack projects typically generate bundles with the .bundle extension:

dist/
  ├── index.bundle        ← Now supported!
  ├── vendor.bundle       ← Now supported!
  ├── styles.css
  └── assets/

Rsdoctor will automatically detect and analyze these .bundle files without any additional configuration.