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.

Please refer to the Performance Building Analysis section for more information.

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.

Use Lightning CSS Plugin#

Lightning CSS is a high performance CSS parser, transformer and minifier written in Rust. It supports parsing and transforming many modern CSS features into syntax supported by target browsers, and also provides a better compression ratio.

Rsbuild provides the Lightning CSS Plugin which allows you to use lightningcss instead of the built-in `postcss-loader' to compile CSS, reducing the performance overhead of PostCSS and autoprefixer.

For projects with a large number of CSS files, enabling the Lightning CSS plugin can significantly improve overall build performance.

import { pluginLightningcss } from '@rsbuild/plugin-lightningcss';

export default {
  plugins: [pluginLightningcss()],
};

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 Rspack - 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 .browserslistrc, which means that only the latest browsers are compatible during development, and the actual browsers are compatible in the production environment:

[production]
chrome >= 87
edge >= 88
firefox >= 78
safari >= 14

[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.