Improve Build Performance#

Rsbuild optimizes build performance by default, but as the project becomes larger, you may encounter some build performance problems.

This document provides some optional speed-up strategies, developers can choose some of them to improve the build performance.

Performance Profiling#

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

Node.js Profiling#

In general, the performance overhead on the JS side will be greater than that on the Rust side, and you can use Node.js profiling to analyze the overhead on the JS side.

Run the following command in the project root:

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

# build
node --cpu-prof ./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

General optimization strategy#

The following are some general optimization strategies, which can speed up the development build and production build, and some of them also optimize the bundle size.

Upgrade Node.js version#

In general, updating Node.js to the latest LTS release will help improve build performance.

Especially for devices with Apple M1/M2 chips, it is recommended to use Node 18.

Node >= 16 provides Apple Silicon binaries by default, so the performance on M1/M2 models will be greatly improved than Node 14. According to our tests, After switching from Node 14 to Node >= 16, the compilation speed can be improved by more than 100%.

You can switch to Node 18 by following steps:

# Install Node v18
nvm install 18

# switch to Node 18
nvm use 18

# Set Node 18 as the default version
nvm default 18

# View Node version
node -v

Development optimization strategies#

The following are strategies for improve build performance in development environment.

Adjust Source Map format#

In order to provide a good debugging experience, Rsbuild uses the cheap-module-source-map format Source Map by default during development, which is a high-quality Source Map format and will bring certain performance overhead.

You can improve build speed by adjusting the source map format of your development environment.

For example to disable Source Map:

export default {
  output: {
    sourceMap: {
      js: false,
    },
  },
};

Or set the source map format of the development environment to the cheapest eval format:

export default {
  output: {
    sourceMap: {
      js: process.env.NODE_ENV === 'development' ? 'eval' : false,
    },
  },
};

For detailed differences between different Source Map formats, see webpack - devtool.

Adjust Browserslist for development#

This strategy is similar to "Adjust Browserslist", the difference is that we can set different browserslist for development and production environment, thereby reducing the compilation overhead during development.

For example, you can add the following config to package.json, which means that only the latest browsers are compatible during development, and the actual browsers are compatible in the production environment:

{
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Note that this strategy can lead to some differences in the build result of development production environment.