#Improve build performance

Rsbuild optimizes build performance by default, but as projects become larger, you may encounter build performance issues.

This document provides some optional optimization methods that developers can use to improve build performance.

#Performance profiling

Performing performance analysis can help identify performance bottlenecks in your project, enabling targeted optimization.

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

#General optimization

These general optimization methods can speed up both development and production builds.

#Upgrade Rsbuild

Upgrading to the latest version of Rsbuild can benefit from the latest performance optimizations, see Upgrade Rsbuild section for more details.

#Enable persistent cache

Rsbuild provides performance.buildCache configuration, which can significantly improve the speed of rebuilding.

#Reducing modules

Optimizing the number of modules referenced by the application can reduce the bundle size and improve build performance. Please read the Bundle Size Optimization section to learn some optimization methods.

#Optimize Tailwind CSS

When using Tailwind CSS v3, if the content field in tailwind.config.js is not correctly configured, this can lead to poor build performance and HMR performance.

Refer to Tailwind CSS v3 - Optimize build performance for more details.

#Parallel Less compilation

If your project uses the @rsbuild/plugin-less plugin and contains a large number of Less files, you can try enabling parallel compilation to improve build performance.

Refer to Less Plugin - parallel for more details.

#Tool selection

While Rsbuild delivers excellent build performance out of the box, certain JavaScript-based tools can negatively impact overall build performance, particularly in large-scale projects.

• @rsbuild/plugin-babel: This plugin is based on Babel. We recommend using the more performant SWC for code transformation instead.
• @rsbuild/plugin-less: The Less compiler has relatively poor performance. Consider using @rsbuild/plugin-sass or other high-performance CSS solutions as alternatives.
• terser-webpack-plugin: You can replace Terser with faster minimizers, such as Rsbuild's built-in SWC minifier.

#Development optimization

These methods improve performance specifically in development mode.

#Enable lazy compilation

Enabling lazy compilation can significantly reduce the number of modules compiled at dev startup and improve startup time.

export default {
  dev: {
    lazyCompilation: true,
  },
};

Refer to dev.lazyCompilation for more information.

#Enable native watcher

Enabling Rspack's native watcher can improve HMR performance in development mode.

export default {
  tools: {
    rspack: {
      experiments: {
        nativeWatcher: true,
      },
    },
  },
};

#Source map format

In order to provide a good debugging experience, Rsbuild uses the cheap-module-source-map format source map by default in development mode, 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 in development mode through output.sourceMap.

For example to disable source map:

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

Or set the source map format of the development mode 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.

#Browserslist for development

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

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

[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 can lead to some differences in the build result between development and production modes.