Build performance profile

This chapter introduces some common performance bottlenecks and performance profile methods for Rspack.

Performance Bottlenecks

Although Rspack itself provides good build performance, the use of some JavaScript loaders and plugins in Rspack can slow down the build performance, especially on large projects.

Some of these issues can be resolved with Rspack's built-in high performance alternatives, while others can be identified and optimized using performance analysis tools.

Here are some common cases:

babel-loader

babel-loader compiles JavaScript and TypeScript code using Babel. You can replace Babel with the faster SWC. Rspack comes with a built-in builtin:swc-loader, which is the Rust version of swc-loader and is intended to provide better performance.

If you need to use some Babel plugins for custom transformations, configure babel-loader with Rule.include to match as few files as possible to reduce the Babel compilation overhead.

postcss-loader

postcss-loader compiles CSS code based on PostCSS, which is often used with PostCSS plugins to downgrade CSS syntax, add vendor prefixes, etc. You can replace PostCSS with the faster Lightning CSS by using Rspack's built-in builtin:lightningcss-loader.

If your project uses the PostCSS plugin for Tailwind CSS v3, you may need to wait for the release of Tailwind CSS v4, which is based on Rust and Lightning CSS and will provide significant performance improvements. For more details, see Open-sourcing our progress on Tailwind CSS v4.0.

terser-webpack-plugin

terser-webpack-plugin minifies JavaScript code based on Terser. You can replace Terser with the faster SWC minimizer by using Rspack's built-in SwcJsMinimizerRspackPlugin.

css-minimizer-webpack-plugin

css-minimizer-webpack-plugin minifies CSS code based on tools like cssnano. You can replace cssnano with the faster Lightning CSS minimizer by using Rspack's built-in LightningCssMinimizerRspackPlugin.

less-loader

less-loader compiles .less files based on Less. Since Less currently lacks an officially implemented high performance alternative, it is recommended to use sass-loader and sass-embedded instead. sass-embedded is a JavaScript wrapper for Sass's native Dart executable that provides excellent performance.

html-webpack-plugin

html-webpack-plugin performs poorly when generating large numbers of HTML files. The HtmlRspackPlugin implemented in Rust by Rspack can provide better performance.

Rspack Profile

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

$ RSPACK_PROFILE=ALL rspack build

This command will generate a .rspack-profile-${timestamp}-${pid} folder in the current folder, and it will contain logging.json, trace.json and jscpuprofile.json files.

  • trace.json: The time spent on each phase of the Rust side is recorded at a granular level using tracing and can be viewed using ui.perfetto.dev
  • jscpuprofile.json: The time spent at each stage on the JavaScript side is recorded at a granular level using Node.js inspector and can be viewed using speedscope.app
  • logging.json: Includes some logging information that keeps a coarse-grained record of how long each phase of the build took

Rsdoctor's Compilation Analysis

Rsdoctor is a build analyser that can visually display the compilation time of each loaders and plugins.

Loader Timeline

If you need to analyze the time cost of loaders and plugins, or the compilation behavior of loaders, you can use Rsdoctor to view:

image

You can view the execution time of each loader and the files that were compiled, as well as the time taken for each file, in the timeline.

Refer to Loader Timeline.

Loader Details

If you want to view the compilation process of loaders, you can use the Loader Details:

image

On this report page, you can see the code changes made by the loaders for each file before and after compilation.

Refer to Loader Details.

Enable Compilation Analysis

To enable RsdoctorRspackPlugin, you can refer to the documentation: Use Rsdoctor.

  • The RsdoctorRspackPlugin requires the features.loader and features.plugins parameters to be set to true. By default, features.loader and features.plugins are enabled. Refer to the parameter documentation Rsdoctor options.
  • Usage documentation:

FAQ

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. For details and reasons, please check:

> The loader of CssExtractRspackPlugin takes too long