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.
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.devjscpuprofile.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.applogging.json: Includes some logging information that keeps a coarse-grained record of how long each phase of the build took
Analysis with Rsdoctor
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:
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:
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
RsdoctorRspackPluginrequires thefeatures.loaderandfeatures.pluginsparameters to be set totrue. By default,features.loaderandfeatures.pluginsare enabled. Refer to the parameter documentation Rsdoctor options. - Usage documentation:
- For Loader Analysis, refer to Loader Timeline and Loader Details.
- For Plugins Analysis, refer to Plugin Analysis.
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: