Rspack 0.3 Release Announcement

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

Streamlined CSS Handling

In version 0.3, we’ve streamlined our CSS handling behavior to align more closely with webpack when setting experiments.css = true. As a result, we've eliminated a multitude of built-in CSS transformation logic, introducing several breaking changes that require your attention. Detailed migration steps are outlined below.

Deprecation of @rspack/postcss-loader and builtins.postcss

In earlier versions, Rspack employed its own @rspack/postcss-loader and builtins.postcss to emulate postcss-loader functionalities. However, with native support for postcss-loader now in place, both these features have been deprecated.

Migration Steps:

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,
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

Elimination of Built-in Autoprefixer

To further align with webpack’s CSS management, we’ve removed the built-in autoprefixer feature. You can now utilize postcss-loader for autoprefixing.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [['autoprefixer']],
              },
            },
          },
        ],
        type: 'css',
      },
    ],
  },
};

For a full example, consult the examples/postcss-loader.

Restricted Access to Internal Modules

To prevent unintended consequences due to changes in our unstable internal module API, we’ve restricted direct access to these modules. Access is now limited to Rspack’s API via the root module.

Migration Steps:

Before:

import { Stats } from '@rspack/core/dist/stats'; // not supported since 0.3

After:

import { Stats } from '@rspack/core';

Major Feature Updates

Native Web Workers Support

In a significant leap forward, Rspack now natively supports Web Workers. This eliminates the need for the worker-loader, allowing for out-of-the-box usage.

new Worker(new URL('./worker.js', import.meta.url));
new Worker(new URL('./worker.js', import.meta.url), {
  name: 'my-worker',
});

For an exhaustive guide on web workers, visit web workers.

Fine-Grained SWC Configuration with builtin:swc-loader

Rspack 0.3 introduces builtin:swc-loader for more granular SWC transformation controls. This Rust-based loader offers a performance advantage over its JavaScript counterpart.

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;

For more examples, refer to examples/builtin-swc-loader. Note that the current version of builtin:swc-loader has some limitations which we plan to address in upcoming releases.

Enhanced Performance Profiling

Performance optimization is critical in production. Hence, we’ve revamped the Rspack Profile feature to streamline performance analytics. You can generate profile-related files by setting the RSPACK_PROFILE environment variable.

$ RSPACK_PROFILE=ALL rspack build

For an in-depth look at this feature, consult Performance Profiling.

Expanded API and Plugin Compatibility

Version 0.3 comes with an extended range of supported plugin APIs, as well as several compatibility improvements for existing plugins. To keep track of our ongoing work in this area, you can follow the progress here: plugin-api-progress.

Tighter Webpack Architecture Alignment

We’ve made strides in optimizing alignment with webpack’s architecture. Specifically, we’ve transitioned from an AST-based codegen approach to a string transformation-based method. This alignment ensures better compatibility with webpack’s Hook APIs, allowing Rspack to integrate more seamlessly with community plugins.

Vue.js Development Simplified with Modern.js Builder

Starting from version 0.2, Rspack has been supporting vue-loader. To make Vue.js development even more straightforward, we’ve introduced the Modern.js Builder. It provides an out-of-the-box Vue.js engineering solution, easing the development process for Vue.js apps using Rspack.

We hope you find these updates to be valuable additions to your development workflow. Your feedback is highly anticipated as we strive to make Rspack the go-to solution for your bundling needs. Thank you for your continued trust and support.

Rspack

Introduction - Modern.js