#Build profiling

Performing a performance analysis can help you identify performance bottlenecks in your project, allowing for targeted optimization.

#Using Rsdoctor

Rsdoctor is a build analyzer that can visually display the compilation time of each loader and plugin.

Please refer to Use Rsdoctor for more information.

#Node.js profiling

When Rsbuild executes a build, it will include the runtime overhead of both JavaScript and Rust code, and the overhead of data communication between JavaScript and Rust.

In general, the performance overhead on the JavaScript side will be greater than that on the Rust side. You can use Node.js profiling to analyze the overhead on the JS side, which helps to identify performance bottlenecks on the JS side.

For example, to perform the CPU profiling analysis, run the following command in the root directory of your project:

# dev
node --cpu-prof ./node_modules/@rsbuild/core/bin/rsbuild.js dev

# build
node --cpu-prof ./node_modules/@rsbuild/core/bin/rsbuild.js build

# Set higher precision sampling interval
node --cpu-prof --cpu-prof-interval=100 ./node_modules/@rsbuild/core/bin/rsbuild.js build

The above commands will generate a *.cpuprofile file. We can use speedscope to visualize this file:

# Install speedscope
npm install -g speedscope

# View cpuprofile content
# Replace the name with the local file name
speedscope CPU.date.000000.00000.0.001.cpuprofile

#Rspack profiling

Rsbuild supports the use of the RSPACK_PROFILE environment variable for Rspack build performance profile.

{
  "scripts": {
    "dev:profile": "RSPACK_PROFILE=OVERVIEW rsbuild dev",
    "build:profile": "RSPACK_PROFILE=OVERVIEW rsbuild build"
  }
}

As Windows does not support the above usage, you can also use cross-env to set environment variables. This ensures compatibility across different systems:

{
  "scripts": {
    "dev:profile": "cross-env RSPACK_PROFILE=OVERVIEW rsbuild dev",
    "build:profile": "cross-env RSPACK_PROFILE=OVERVIEW rsbuild build"
  },
  "devDependencies": {
    "cross-env": "^7.0.0"
  }
}

When the build command is finished, or the dev server is shut down, Rsbuild will create a .rspack-profile-${timestamp}-${pid} folder in the current directory, containing a rspack.pftrace file (in versions before 1.4.0, it was trace.json), which is generated by Rspack based on tracing and records the time spent on each phase at a granular level, and can be viewed using ui.perfetto.dev.