Build performance profile
This chapter introduces some common performance bottlenecks and performance profile methods for Rspack.
Analysis with Rsdoctor
Rsdoctor is a build analyzer that can visually display the build process, such as compilation time, code changes before and after compilation, module reference relationships, duplicate modules, etc.
Please refer to Use Rsdoctor for more information.
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 trace.json:
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
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.