English

Announcing Rspack 1.0 Alpha

June 29, 2024

Rspack 1.0 alpha is now available on npm!

Before releasing Rspack 1.0 stable version, we will test for 1~2 months to improve the API stability and reliability of v1.0 and to verify its impact on downstream projects.

Rspack 1.0 stable version is expected to be released this August. This is a significant milestone as it means that Rspack has implemented the major features and APIs of webpack. This will allow thousands of webpack projects to make a smooth transition while achieving significant improvements in build performance.

Outputs Optimization

Rspack 1.0 enables the optimization.concatenateModules by default during production builds. This option enables module concatenation optimization, also known as scope hoisting.

rspack.config.mjs

export default {
  optimization: {
    // Now enabled by default in production
    concatenateModules: mode === 'production',
  },
};

The primary purpose of module concatenation is to merge multiple modules into a single function, thereby reducing the overhead associated with parsing and executing JavaScript code in the browser. By merging modules, redundant code such as import and export statements between modules can be reduced, resulting in smaller bundle sizes.

With module concatenation enabled, the output size of Rspack can be reduced by about 4% to 10% (before Gzip).

Currently, Rspack has implemented most of the optimization strategies aligned with webpack. In future versions, Rspack will explore and make improvements based on webpack to provide deeper optimizations and smaller output sizes.

Builtin Lightning CSS

Rspack 1.0 has built-in integration with Lightning CSS. Lightning CSS is an extremely fast CSS parser, transformer, bundler, and minifier written in Rust.

The new version of Rspack has implemented the CSS minimizer plugin based on Lightning CSS, and it is now the default CSS minimizer of Rspack. Compared to the previously used SWC CSS minimizer plugin, it applies more optimizations to make the CSS output smaller.

rspack.config.mjs

export default {
  optimization: {
    minimizer: [
      // The default CSS minimizer changed:
-     new rspack.SwcCssMinimizerRspackPlugin()
+     new rspack.LightningCssMinimizerRspackPlugin()
    ],
  },
};

You can switch back to SwcCssMinimizerRspackPlugin by following configuration.

export default {
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin(),
      new rspack.SwcCssMinimizerRspackPlugin(),
    ],
  },
};

For example, Rspack already has tree shaking for CSS Modules, but it only removes unused CSS Modules classnames referenced by JS files. With the unusedSymbols option of Lightning CSS, Rspack can now eliminate unused declarations in CSS Modules files, including IDs, keyframes, CSS variables or other CSS identifiers.

We believe that Lightning CSS will become the shared foundation for the next generation build tools, and Rspack will support more CSS compilation features based on Lightning CSS.. Thanks to @devongovett for creating such an excellent tool.

Lean Core

To ensure the long term stability of Rspack v1, we have removed some non-core features that were built into the Rspack core. This allows the core to be lean and focused on providing common bundler features.

In v0.x, Rspack core has built-in SWC plugins to support Emotion, Styled Components, and Relay. This is because in the early days Rspack did not support the use of SWC Wasm plugins and could only integrate them into the core.

Currently, Rspack supports the use of SWC plugins via experimental.plugins in builtin:swc-loader. So we have removed the built-in plugins from the Rspack core, including:

Take @swc/plugin-styled-components as an example. In v1.0, you can use it as follows.

Installation:

npm i @swc/plugin-styled-components -D

Configuration:

export default {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-           styledComponents: {},
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-styled-components", {}]],
+           },
          },
        },
      },
    ],
  },
};

Bundling CSS

Rspack 1.0 aligns with the webpack experiment.css default value, making it easier to migrate from webpack to Rspack.

In the webpack ecosystem, there are three common approaches to bundling CSS files:

Use css-loader and mini-css-extract-plugin to generate standalone CSS files.
Use css-loader and style-loader to inject CSS through <style> tags.
Use experiment.css, an experimental feature introduced in webpack 5 that provides native CSS support.

In version 0.x, Rspack enabled experiment.css by default, which would conflict with css-loader. Users had to manually disable experiment.css to use css-loader.

Starting with Rspack 1.0, the default value of experiment.css changes to false, in line with webpack, allowing users to use any of the above approaches.

You can add the following configuration to continue using experiment.css:

rspack.config.mjs

export default {
  experiments: {
    css: true,
  },
};

How to Upgrade

To install the alpha version of Rspack and Rspack CLI:

# npm
npm add -D --save-exact @rspack/core@alpha @rspack/cli@alpha

# yarn
yarn add -D --save-exact @rspack/core@alpha @rspack/cli@alpha

# pnpm
pnpm add -D --save-exact @rspack/core@alpha @rspack/cli@alpha

During the Rspack alpha testing, new versions will still introduce some breaking changes, which we will highlight in the changelog. Please read the changelog to understand the differences before upgrading.

For Rsbuild users, please wait for the release of Rsbuild 1.0 alpha version (expected in 1-2 weeks).

Breaking Changes

resolve.tsConfigPath

resolve.tsConfigPath config has been removed, please use resolve.tsConfig instead.

rspack.config.mjs

export default {
  resolve: {
-   tsConfigPath: path.resolve(__dirname, './tsconfig.json'),
+   tsConfig: path.resolve(__dirname, './tsconfig.json'),
  },
};

rspackExperiments.styledComponents

The rspackExperiments.styledComponents option of builtin:swc-loader has been removed, please use @swc/plugin-styled-components instead.

export default {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-           styledComponents: true,
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-styled-components", {}]],
+           },
          },
        },
      },
    ],
  },
};

rspackExperiments.emotion

The rspackExperiments.emotion option of builtin:swc-loader has been removed, please use @swc/plugin-emotion instead.

export default {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-           emotion: true,
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-emotion", {}]],
+           },
          },
        },
      },
    ],
  },
};

rspackExperiments.relay

The rspackExperiments.relay option of builtin:swc-loader has been removed, please use @swc/plugin-relay instead.

export default {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "builtin:swc-loader",
        options: {
-         rspackExperiments: {
-           relay: true,
-         },
          jsc: {
+           experimental: {
+             plugins: [["@swc/plugin-relay", {}]],
+           },
          },
        },
      },
    ],
  },
};

Others

Other breaking changes:

optimization.chunkIds defaults to 'natural' when mode === 'none', see #6956.
optimization.moduleIds defaults to 'natural' when mode === 'none', see #6956.
Rust crate swc_core has been upgraded to 0.95.x, please upgrade your SWC Wasm plugin, see #6887.
Removed output.amdContainer, use output.library.amdContainer instead, see #6958。
Removed Compilation.currentNormalModuleHooks, see #6859.
Removed stats.modules[].profile.integration, see #6947.
Removed some options for SwcJsMinimizerRspackPluginOptions, see #6950.

ON THIS PAGE

Announcing Rspack 1.0 Alpha#

Outputs Optimization#

Builtin Lightning CSS#

Lean Core#

Bundling CSS#

How to Upgrade#

Breaking Changes#

resolve.tsConfigPath#

rspackExperiments.styledComponents#

rspackExperiments.emotion#

rspackExperiments.relay#

Others#

Announcing Rspack 1.0 Alpha

Outputs Optimization

Builtin Lightning CSS

Lean Core

Bundling CSS

How to Upgrade

Breaking Changes

resolve.tsConfigPath

rspackExperiments.styledComponents

rspackExperiments.emotion

rspackExperiments.relay

Others