Rsbuild v0.1 Release and Rspack 0.4 Major Changes – Features, Performance, and Migration Guide

Rsbuild v0.1 Release

We are excited to announce the release of Rsbuild v0.1 . Rsbuild is a build tool based on Rspack, designed as an enhanced Rspack CLI that is easy to use out‑of‑the‑box and serves as the best migration path from Webpack to Rspack, reducing configuration by up to 90% and delivering up to 10× faster builds.

🚀 Performance

Rsbuild’s build performance is on par with native Rspack, though slightly lower due to additional built‑in features. Benchmark data for building 1,000 React components is shown in the accompanying image.

🔥 Features

Easy Configuration : Zero‑config development with a semantic configuration API to lower the learning curve of Rspack.

Performance First : Integrates high‑performance Rust‑based tools such as Rspack and SWC, offering 5‑10× faster builds and smaller dependency size compared with Create React App or Vue CLI.

Plugin Ecosystem : Lightweight plugin system, compatible with most Webpack plugins and all Rspack plugins.

Stable Output : Consistent development and production artifacts with automatic syntax downgrade and polyfill injection, plus TypeScript and syntax checking plugins.

Framework‑Agnostic : Supports React, Vue 3, Vue 2, Svelte, Solid, Lit, etc., via plugins.

💡 Next Steps

Rsbuild is still rapidly iterating. The upcoming Rsbuild Doctor will be a powerful build analysis tool for all Rspack and Webpack projects, offering visual UI to pinpoint build time, duplicate dependencies, and code transformation details.

Rsbuild Doctor preview image is shown above, with the first usable version expected soon and a full 1.0 release planned for early 2024.

Welcome to explore the Rsbuild repository for more details 🙌.

Rspack 0.4 Major Changes

Stop Supporting Node.js 14

Rspack now requires Node.js 16+.

Adjust @rspack/core Peer Dependency

@rspack/core is now a peer dependency of @rspack/cli . Users must manually install both @rspack/core and @rspack/cli . The recommendation is to use Rsbuild as the out‑of‑the‑box solution.

Deprecate Default Transform

The option experiments.rspackFuture.disableTransformByDefault is enabled by default in v0.4.0. To retain the old behavior, set it to false . This affects built‑in code transformation, target handling, and custom Rule.type configurations.

module.exports = {
  module: {
    rules: [
      {
        test: /.jsx$/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: { syntax: "ecmascript", jsx: true },
            transform: { react: { runtime: "automatic" } }
          },
          rspackExperiments: { emotion: true }
        },
        type: 'javascript/auto',
      },
    ],
  },
  experiments: {
    rspackFuture: { disableTransformByDefault: true }
  }
};

Target Configuration Changes

Set target to ["web", "es5"] and note that jsc.target and env cannot be used together.

module.exports = {
  target: ["web", "es5"],
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: { parser: { syntax: "ecmascript" } },
          // Note: jsc.target and env cannot be set simultaneously.
          env: { targets: "chrome >= 48" }
        },
        type: 'javascript/auto',
      },
    ],
  }
};

Deprecate builtin.react.refresh

With the default transform disabled, builtin.react.refresh is deprecated. Use @rspack/plugin-react-refresh and install react-refresh manually.

+ const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
 const isDev = process.env.NODE_ENV === 'development';
 
 module.exports = {
   mode: isDev ? 'development' : 'production',
   module: {
     rules: [
       {
         test: /.jsx$/,
         use: {
           loader: 'builtin:swc-loader',
           options: {
             jsc: {
               parser: { syntax: 'ecmascript', jsx: true },
               transform: { react: { development: isDev, refresh: isDev } }
             }
           }
         }
       }
     ]
   },
   plugins: [
     isDev && new ReactRefreshPlugin()
   ].filter(Boolean),
 };

Deprecate builtin:sass-loader

builtin:sass-loader is deprecated; migrate to the standard sass-loader . It will be removed in v0.5.0.

Deprecate experiments.incrementalRebuild

This configuration is now always enabled and will be removed in v0.5.0.

API Refactoring in @rspack/core

Some APIs previously re‑exported from @rspack/core have been cleaned up. This should not cause issues unless you relied on those accidental exports.

Deprecate split‑chunks fields

builtins.devFriendlySplitChunks and experiments.newSplitChunks are removed in favor of Webpack’s native splitChunks implementation.

New Default Resolver

The oxc_resolver is now enabled by default, offering up to 5× faster resolution than the previous implementation and 28× faster than enhanced-resolve . It supports tsconfig.json paths and monorepo aliasing via resolve.tsConfig . To disable, set experiments.rspackFuture.newResolver to false .

Migration Guide

The migration example demonstrates how to move from Rspack 0.3.14 to 0.4.0.

Choosing @rspack/cli or Rsbuild

For CSR applications, Rsbuild is strongly recommended over configuring Rspack manually.

Upgrade Node.js Version

From 0.4.0 onward, only Node.js 16+ is supported.

Manually Install @rspack/core

{
  "devDependencies": {
    "@rspack/core": "0.4.0",
    "@rspack/cli": "0.4.0"
  }
}

Use builtin:swc-loader for Module Transformation

Enable default transformation by setting experiments.rspackFuture.disableTransformByDefault to false .

{
  experiments: {
    rspackFuture: {
      disableTransformByDefault: false; // enable default transform
    }
  }
}

Migrate builtin options to plugins

Examples:

+ const rspack = require("@rspack/core")
module.exports = {
  // builtins.define -> DefinePlugin
  plugins: [
    + new rspack.DefinePlugin({ process.env.NODE_ENV: JSON.stringify(process.env.NODE_ENV) })
  ]
}

+ const rspack = require("@rspack/core")
module.exports = {
  // builtins.html -> HtmlRspackPlugin
  plugins: [
    + new rspack.HtmlRspackPlugin({ template: "./index.html" })
  ]
}

Multiple HTML configurations can be handled by creating multiple plugin instances.

const rspack = require('@rspack/core');
module.exports = {
  plugins: [
    new rspack.HtmlRspackPlugin({ template: './index.html' }),
    new rspack.HtmlRspackPlugin({ template: './foo.html' })
  ]
};

Built‑in copy and minify options are replaced by CopyRspackPlugin and SwcJsMinimizerRspackPlugin respectively.

const rspack = require("@rspack/core");
module.exports = {
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin({ /* minimizer config */ })
    ]
  }
};

For further migration details, refer to the internal plugins documentation.

References

See the numbered references in the original article for links to repositories, documentation, and related resources.