Since the launch of Rspack 0.2, we've been meticulously gathering community feedback and iterating on our offering. We're thrilled to unveil Rspack 0.3—a significant upgrade that amplifies flexibility, compatibility, and performance. This new release brings a series of breaking changes, major feature rollouts, and finer-grained controls, all aligned to provide you with a more robust, adaptable, and efficient build tool. Read on for a comprehensive look at what Rspack 0.3 has in store.
Breaking Changes
In version 0.3, Rspack aligns the default CSS handling behavior with webpack when set experiments.css = true. This involves removing many built-in CSS transformation logic, which introduces some breaking changes. If your application previously relied on these transformation logic, please pay attention to the migration steps below.
Removal of @rspack/postcss-loader and builtins.postcss
Before Rspack fully supported postcss-loader, Rspack implemented @rspack/postcss-loader and built-in builtins.postcss to fulfill the functionality. Currently, Rspack fully supports postcss-loader, so we have decided to deprecate @rspack/postcss-loader and builtins.postcss. Users of @rspack/postcss-loader can seamlessly migrate to postcss-loader, while users that previously used Rspack’s builtins.postcss for the px2rem conversion functionality can migrate to postcss-loader and postcss-plugin-px2rem. Here is the migration process:
• Before:
module.exports = {
builtins: {
postcss: {
pxtorem: {
rootValue: 50,
},
},
},
};
• After:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-plugin-px2rem',
{
rootValue: 100,
},
],
],
},
},
},
],
},
],
},
};
Removal of Built-in CSS Autoprefixer Functionality
To align better with webpack’s CSS handling, Rspack removes the built-in autoprefixer functionality in 0.3. You can use postcss-loader to achieve autoprefixer.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [['autoprefixer']],
},
},
},
],
type: 'css',
},
],
},
};
You can refer to the examples/postcss-loader for a complete example.
Access to Internal Modules Restricted
Due to the current instability of the internal module API in Rspack, directly accessing the internal modules can easily lead to breaking changes. Therefore, Rspack restricts the ability to directly access internal modules and only supports accessing Rspack’s API from the root module.
• Before:
import { Stats } from '@rspack/core/dist/stats'; // not supported since 0.3
• After:
import { Stats } from '@rspack/core';
Major Feature Updates
Web Workers Support
Rspack natively supports Web Workers, which means you can use Web Workers out of the box without using worker-loader. Here is how to use it:
new Worker(new URL('./worker.js', import.meta.url));
new Worker(new URL('./worker.js', import.meta.url), {
name: 'my-worker',
});
For more information about web workers support, see web workers.
builtin:swc-loader Support
Although Rspack provides many SWC compilation configuration options, these configurations are global and cannot fulfill the requirement of using different swc transformation logic for different modules. Therefore, Rspack supports builtin:swc-loader to provide more fine-grained SWC transformation configuration. Compared to the JavaScript version of swc-loader, builtin:swc-loader has better performance. You can use builtin:swc-loader as follows:
const path = require('path');
const config = {
module: {
rules: [
{
test: /\.jsx$/,
use: {
loader: 'builtin:swc-loader',
options: {
// Enable source map
sourceMap: true,
jsc: {
parser: {
syntax: 'ecmascript',
jsx: true,
},
transform: {
react: {
pragma: 'React.createElement',
pragmaFrag: 'React.Fragment',
throwIfNamespace: true,
development: false,
useBuiltins: false,
},
},
},
},
},
type: 'javascript/auto',
},
],
},
};
module.exports = config;
You can refer to examples/builtin-swc-loader for more examples. Currently, builtin:swc-loader still has limitations, such as not supporting wasm plugins, etc. Rspack will continue to iterate and support more features of builtin:swc-loader in future versions.
Improved Profile Support
Performance optimization is a common requirement in business support. To reduce the cost of performance optimization for businesses, we have improved the experience of Rspack Profile. You can generate profile-related files for performance optimization by using the RSPACK_PROFILE environment variable.
$ RSPACK_PROFILE=ALL rspack build
For more detailed information about Profile, see Performance Profiling.
Alignment with More APIs
-
splitChunks.chunkssupports regex. - Supports
splitChunk.\{cacheGroup\}.type. - Supports
splitChunk.\{cacheGroup\}.idHint. - Supports
ensureChunkConditionsPlugin. -
rule.usesupports functions. - Supports
configuration.profile.
More Hook and Plugin Support
Compared to version 0.2, we have implemented more plugin APIs and made compatibility improvements for more plugins in version 0.3. At the same time, we have refined the plugin API support progress of webpack, making the support progress of plugin APIs transparent. You can track the implementation progress of plugin APIs here: plugin-api-progress.
Alignment with Webpack Architecture
In version 0.3, we have further optimized the alignment with the webpack architecture, migrating from the original AST-based codegen architecture to the string transformation-based architecture. This alignment work further ensures that Rspack can align with more Hook APIs of webpack during the codegen stage to be compatible with more community plugins.
Rspack Ecosystem
Starting from version 0.2, Rspack provides support for vue-loader. However, creating a complete Vue.js CLI solution based on vue-loader can be a complex task. To simplify the development of Vue.js applications using Rspack, we offer the Modern.js Builder, which provides an out-of-the-box Vue.js engineering solution called Modern.js Vue.js Support. This solution helps developers easily develop Vue.js applications using Rspack.
Top comments (0)