April 22, 2026

#Announcing Rsbuild 2.0

We are pleased to announce the official release of Rsbuild 2.0.

Rsbuild is a modern build tool powered by Rspack and a key part of the Rstack ecosystem. Around it, we've built a set of higher-level tools, including Rspress, Rslib, Rstest, Storybook Rsbuild, and more. These tools share a unified build foundation and plugin system through Rsbuild, delivering a consistent development experience across application development, library builds, documentation sites, and testing.

Since the 1.0 release, Rsbuild's weekly npm downloads have grown by more than 15x, and it has become the preferred build tool for new Rspack projects. More teams are also migrating from tools such as webpack and Create React App to Rsbuild to improve both build performance and developer experience.

To help the ecosystem upgrade smoothly to 2.0, we spent three months validating and refining this release, publishing more than 20 preview versions along the way. Rslib, Rstest, Rspress, Storybook Rsbuild, and Modern.js have all completed the upgrade and are now running stably in production.

The main improvements in 2.0 include:

• New features:
  • Upgrade to Rspack 2.0
  • React Server Components support
  • Dev server and client communication
  • Extending the built-in server
  • Custom logger support
  • Easier chunk splitting configuration
  • create-rsbuild template updates
• Lighter weight:
  • Reduced dependencies
• Safer by default:
  • Default host change
  • Proxy middleware upgrade
• More modern:
  • Pure ESM package
  • Node.js support
  • Updated default targets
  • ESM Node.js output
  • Updated decorator version

#Upgrade to Rspack 2.0

Rsbuild 2.0 is powered by Rspack 2.0. This brings faster builds, new output optimization capabilities, and many improvements under the hood.

For more details, see the Rspack 2.0 announcement post.

#React Server Components support

React Server Components (RSC) are a type of pre-rendered React component that combines data fetching and component logic while reducing the amount of JavaScript sent to the client.

To make RSC easier to use in Rsbuild-based web apps and frameworks, we introduced the rsbuild-plugin-rsc plugin. It is built on top of Rspack's built-in RSC support and uses Rsbuild's Environments API to organize multiple environments, such as client and server, in a unified way. This reduces both integration and configuration costs.

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginRSC } from 'rsbuild-plugin-rsc';

export default defineConfig({
  plugins: [
    pluginReact(),
    pluginRSC({
      // Plugin options
    }),
  ],
  environments: {
    server: {
      // Server config...
    },
    client: {
      // Client config...
    },
  },
});

The plugin is still experimental. It can already run the React Router RSC example, and it has also been adopted by the Modern.js framework.

We're also working with the TanStack team and plan to add support for TanStack Start and TanStack's RSC in future releases. TanStack Start is a full-stack framework built on TanStack Router, and we're excited to explore more possibilities for RSC together.

#Dev server and client communication

While working on React Server Components support, we found that some scenarios require communication between the dev server and the browser. For example, after the server completes some work, it may need to actively notify the client to run related logic.

To support this, Rsbuild 2.0 provides a set of communication APIs:

• The server can send messages to the client for the current environment through hot.send
• The client can listen to these custom events through import.meta.webpackHot.on

These APIs reuse the existing HMR channel, so no additional WebSocket connection is required. Messages are sent only to the matching environment, avoiding unnecessary broadcasts.

For example, when server-side state changes, you can notify the client to update instead of triggering a full page refresh:

• Send a message from the server:

server.environments.web.hot.send('data-change', {
  count: 1,
});

• Listen for the message on the client:

if (import.meta.webpackHot) {
  import.meta.webpackHot.on('data-change', ({ count }) => {
    console.log('data updated:', count);
  });
}

#Extending the built-in server

Rsbuild 2.0 adds the server.setup option, which allows you to run initialization logic when the dev server or preview server starts.

Compared with the existing server.setupMiddlewares, this option is more powerful. You can use it to customize the built-in Rsbuild server by registering middleware, running tasks before startup, or injecting different logic for dev and preview modes. With server.setup, these tasks can be handled directly in the Rsbuild config.

For example, you can add a simple endpoint for local development and preview:

export default {
  server: {
    setup: ({ server }) => {
      server.middlewares.use((req, res, next) => {
        if (req.url === '/api/health') {
          res.end('ok');
          return;
        }
        next();
      });
    },
  },
};

#Custom logger support

With the new customLogger option, you can define a different logger for each Rsbuild instance.

This makes it possible to use different log levels, output prefixes, or custom logging systems without modifying the global logger instance.

import { createLogger, defineConfig } from '@rsbuild/core';

const customLogger = createLogger({
  level: 'warn',
  prefix: '[web]',
});

export default defineConfig({
  customLogger,
});

See the logging guide for more details.

#Easier chunk splitting configuration

In 1.x, Rsbuild provided common chunk splitting strategies through performance.chunkSplit. However, its design differed significantly from Rspack's splitChunks, so developers had to learn additional concepts such as strategy and forceSplitting. It also made it harder for coding agents to generate splitChunks configurations that matched community conventions directly, often requiring extra conversion.

For this reason, Rsbuild 2.0 introduces the new splitChunks option. Its behavior is fully aligned with Rspack's splitChunks, and an additional preset option provides built-in presets.

For example, you can use the per-package preset to split each package into a separate chunk:

export default {
  splitChunks: {
    preset: 'per-package',
    chunks: 'all',
  },
};

performance.chunkSplit is deprecated in 2.0, but existing configurations will continue to work. We recommend migrating by following Migrate from performance.chunkSplit.

#create-rsbuild template updates

Alongside the core improvements, we also updated the templates in create-rsbuild to make project scaffolding better aligned with current development practices:

• AGENTS.md is now generated by default, and you can install Agent Skills such as rsbuild-best-practices during initialization.
• When creating a React project, you can choose React Compiler as an optional tool.
• Experimental support for Rslint has been added. Rslint is a high-performance linter built on typescript-go.
• Outdated React 18 and Vue 2 templates have been removed.

#Reduced dependencies

Rsbuild 2.0 reduces its default dependencies by moving packages that are only needed in specific scenarios out of the default install set. This reduces the number of default dependencies from 13 to 4 and cuts installation size by about 2 MB.

The main changes are:

• core-js is no longer installed by default. Install it manually when using output.polyfill.
• @module-federation/runtime-tools is no longer installed by default. Install it manually when using moduleFederation.options. Module Federation 2.0 is not affected.
• The webpack-bundle-analyzer dependency has been removed. We recommend using Rsdoctor for bundle analysis, or installing and registering webpack-bundle-analyzer yourself.

#Default host change

The default value of server.host has changed from '0.0.0.0' to 'localhost'. By default, the dev server and preview server now listen only on the local machine and are no longer exposed to other devices on the local network.

This change follows a secure-by-default principle. In most local development scenarios, the dev server does not need to be exposed externally. Listening only on the local address reduces accidental exposure and lowers the risk of scans or attacks on shared networks.

If you need to access the page from devices on the local network, you can enable network access explicitly:

export default {
  server: {
    host: '0.0.0.0',
  },
};

You can also enable it quickly with the --host CLI option:

rsbuild --host

#Proxy middleware upgrade

The http-proxy-middleware used by the dev server has been upgraded from v2 to the latest v4 release. At the same time, its underlying dependency has been switched from the unmaintained http-proxy to httpxy, which is actively maintained by the unjs community.

This brings several improvements:

• HTTP/2 proxy support
• Fixes for known security issues
• No longer relying on Node.js's deprecated url.parse() API

Some fields in server.proxy have changed. When upgrading, please refer to Migrate from v1 to v2.

#Pure ESM package

@rsbuild/core is now published as a pure ESM package, and its CommonJS build output has been removed. This change only affects how Rsbuild itself is distributed, reducing installation size by about 500 KB.

In Node.js 20 and later, the runtime natively supports loading ESM modules through require(esm). For most projects that still use Rsbuild through its JavaScript API, this change should have no practical impact and does not require any code changes.

#Node.js support

Starting from 2.0, the minimum supported Node.js versions for Rsbuild are 20.19+ or 22.12+. Since Node.js 18 reached end of life in late April 2025, 2.0 no longer supports it.

We usually remove support for a Node.js version about one year after it enters EOL, to give the community and users more time to upgrade.

#Updated default targets

Rsbuild 2.0 updates its default targets so build output targets more modern browsers and Node.js versions.

For web output, the default browserslist now aligns with the widely available range defined by Baseline. Specifically, it uses the target set for 2025-05-01, which represents the Web platform capabilities widely supported by mainstream browsers at that point.

The default values change as follows:

• Chrome 87 -> 107
• Edge 88 -> 107
• Firefox 78 -> 104
• Safari 14 -> 16

This means that if you do not explicitly configure browserslist, Rsbuild will generate more modern JavaScript and CSS by default while reducing syntax downleveling and polyfills.

For Node.js output, the default target version is also raised from Node.js 16 to Node.js 20.

If you have already configured the target environment explicitly through .browserslistrc, package.json#browserslist, or output.overrideBrowserslist, these changes will not affect your project.

#ESM Node.js output

For Node.js output, Rsbuild 2.0 now generates unminified ES modules by default instead of the minified CommonJS output used in Rsbuild v1.

This better matches common practice in modern Node.js applications. At the same time, leaving server-side code unminified by default helps preserve readable stack traces and makes debugging easier.

Note that the runtime must be able to load ESM. For example, you can set "type": "module" in package.json, or use .mjs as the output file extension. If your project still depends on CommonJS, you can switch back explicitly:

export default {
  output: {
    target: 'node',
    module: false,
    minify: true,
  },
};

#Updated decorator version

With the underlying SWC now supporting the 2023-11 decorator version, Rsbuild updates the default value of decorators.version from 2022-03 to 2023-11.

2023-11 is the latest proposal version. It corresponds to the specification after the TC39 meeting in November 2023 and is also the default behavior in Babel 8. If you need to keep the old behavior, you can specify the version explicitly:

export default {
  source: {
    decorators: {
      version: '2022-03',
    },
  },
};

#Upgrading to Rsbuild 2.0

For most projects, upgrading to Rsbuild 2.0 should be relatively smooth. Although 2.0 introduces some default behavior and breaking changes, most come with a clear migration path, and in most cases you do not need to modify application code.

If you are using a coding agent with skill support, you can install the rsbuild-v2-upgrade skill to let the agent automatically help with dependency upgrades, configuration updates, and migration checks, reducing manual work.

npx skills add rstackjs/agent-skills --skill rsbuild-v2-upgrade

For the full migration guide and the complete list of breaking changes, see Migrate from v1 to v2.

#Acknowledgments

Rsbuild is primarily developed by the Rstack team, and it also relies on contributions from community members and support from users. Since the 1.0 release, many developers have helped move Rsbuild forward through their contributions. We would like to thank everyone who has been part of that journey:

@9aoy, @adammark, @ahabhgk, @alexUXUI, @bodia-uz, @Brennvo, @caohuilin, @Cheese-Yu, @chenjiahan, @Chevindu, @Colin3191, @colinaaa, @CPunisher, @davide97g, @Deku-nattsu, @DeveshSapkale, @dovigod, @Draculabo, @easy1090, @escaton, @fansenze, @fi3ework, @gaoachao, @GiveMe-A-Name, @GRAMMAC1, @hai-x, @hangCode2001, @hardfist, @hasnum-stack, @htoooth, @Huxpro, @ianzone, @iceprosurface, @inottn, @jerrykingxyz, @jkzing, @JounQin, @JSerFeng, @JSH-data, @junhea, @junxiongchu, @lguzzon, @LingyuCoder, @lluisemper, @lxKylin, @mhutter, @miownag, @mycoin, @nikhilsnayak, @notzheng, @Nsttt, @nyqykk, @puxiao, @qmakani, @quininer, @RobHannay, @roli-lpci, @s-chance, @s-r-x, @sagar-dwivedi, @Sang-Sang33, @schu34, @ScriptedAlchemy, @Shucei, @shulaoda, @Simon-He95, @slobo, @snatvb, @SoonIter, @stormslowly, @SyMind, @T9-Forever, @thinkasany, @Timeless0911, @TinsFox, @valorkin, @vegerot, @VenDream, @wangi4myself, @wChenonly, @wjw99830, @wralith, @wxiaoyun, @xbzhang2020, @xc2, @xettri, @xiaohp, @xuexb, @xun082, @yifancong, @ymq001, @zackarychapple, @zalishchuk, @zoolsher

September 10, 2024

#Announcing Rsbuild 1.0

We are pleased to announce the release of Rsbuild 1.0!

#Why Rsbuild

For a long time, developers using webpack have been bothered by two major issues: slow build times and configuration complexity.

We have used Rust to rewrite webpack into Rspack, which addresses the slow build issue. However, to maintain compatibility with the webpack ecosystem, Rspack retains webpack's configuration and API, which means it still has some complexity and a learning curve.

#Evolution of the ecosystem

In the early days, there were some excellent tools within the webpack ecosystem, such as Create React App (CRA) and Vue CLI. These tools provided best practices for building React or Vue applications, while hiding the complex webpack configuration. As a result, many React and Vue users used these tools to build applications without having to configure webpack from scratch.

As the ecosystem evolved, full-stack web frameworks such as Next.js, Nuxt, and Remix became popular; Vite was introduced as a lightweight build tool and also gained popularity. However, CRA and Vue CLI gradually stopped being maintained.

When we look at the npm download numbers for webpack, CRA, and Vue CLI, we find that a large number of projects are still using these tools. For example, webpack has about 25 million weekly downloads, and CRA has nearly 3 million weekly downloads. Many of these projects are CSR applications that do not require the SSR features of full-stack frameworks. Vite seems like a good choice, but after using Vite in our ByteDance projects, we found that migrating from webpack to Vite comes with high costs and introduces new problems, such as dev and build inconsistency, and slow page refreshes in large applications during development.

For the webpack ecosystem, we discovered a sad fact: the webpack ecosystem lacks a build tool that is easy to use and well maintained. The tool should be as user-friendly as CRA and Vue CLI, fully meet the needs of CSR application development, and have features such as fast startup and plugin support similar to Vite.

#The birth of Rsbuild

During the development of Rspack, we became aware of the above problems and decided to create a modern build tool based on Rspack called Rsbuild.

Rsbuild is built on top of Rspack. We designed Rsbuild with an easy-to-use, TypeScript-friendly API and a set of carefully designed configurations to fully leverage the Rspack's build performance while reducing configuration complexity and high up-front costs.

When developing Rsbuild, we learned best practices from the best tools in the community and focused on two usage scenarios:

• As a lightweight build tool: Helps developers quickly set up web applications with out-of-the-box support for CSR applications.
• As a shared infrastructure: Provides JavaScript API and Plugin API for higher-level tools and frameworks, allowing developers to easily build their tools or frameworks on top of Rsbuild.

#Performance

Rsbuild is currently the fastest build tool in the webpack and Rspack ecosystem. Here is a comparison between Rsbuild, Create React App, Vite, and Rspack CLI:

Compared to the Rspack CLI, Rsbuild provides a richer set of features while demonstrating superior performance.

This is because Rspack CLI needs to maintain compatibility with the webpack-cli. It relies on the webpack-dev-server and provides the same default behavior as webpack, which has some performance limitations. Rsbuild, on the other hand, is designed for modern web development. We have reimplemented a lighter CLI, dev server, and build process for Rsbuild, resulting in faster startup speeds and fewer npm dependencies.

See the Rsbuild Introduction for more comparisons between Rsbuild, webpack, Vue CLI, and Vite.

#Who is using

In the Rspack 1.0 Announcement, we introduced that Rspack is growing rapidly, with almost half of Rspack users using Rsbuild and giving us lots of positive feedback.

At ByteDance, we use Rsbuild as the cornerstone of our internal web frameworks to support thousands of web projects. These projects cover diverse use cases, including desktop web applications, mobile web applications, cross-platform web applications, documentation sites, and more.

For the community, we have open-sourced a high-performance toolchain based on Rsbuild, including the static site generator Rspress, the library development tool Rslib, the full-stack React framework Modern.js, and the Storybook Rsbuild. The extensibility of Rsbuild allows these tools to flexibly integrate with Rsbuild and share its plugin ecosystem.

After releasing Rsbuild 1.0, we also plan to collaborate with some excellent teams like Remix, to bring Rsbuild to more web frameworks.

#Plugin ecosystem

The Rsbuild plugin ecosystem is constantly evolving. There are currently over 50 Rsbuild plugins available in the community. We provide several advanced features through plugins to support the development of production-grade applications, such as type checking, compatibility checking, and static assets retry. Thanks to Rspack's compatibility with webpack, Rsbuild also supports most webpack plugins.

Compared to webpack or Rspack, the Rsbuild plugin API is more straightforward and beginner-friendly, allowing developers to easily create plugins to meet their specific needs.

For example, let us implement a plugin that outputs a file to the dist directory. The implementation comparison between Rspack and Rsbuild is as follows:

As shown, the API style of the Rsbuild plugin is similar to esbuild, it can be defined by a function. The plugin hooks have been simplified to avoid verbose APIs, making plugin development more intuitive.

#How to use 1.0

• If you haven't used Rsbuild before, you can experience it through the CodeSandbox example or refer to the Quick start to use Rsbuild.
• If you are using Rsbuild 0.7 or earlier, please note that 1.0 includes some breaking changes. You can refer to the Migrating from 0.x document to upgrade.
• Rsbuild also provides migration guides for projects that use webpack, CRA, Vue CLI, etc. See Migrate from Existing Projects.

Give a star 🌟 to the Rsbuild GitHub repository.

#What's next

Rsbuild 1.0 provides several advanced features for the development of enterprise applications and higher-level tools, such as the multi-environment build API, SSR API, plugin API, Module Federation support, and library build (Rslib). We plan to continue to enhance these features to better support the development of the Rsbuild ecosystem.

In the next 12 to 18 months, Rsbuild will evolve together with Rspack, adopting Rspack's new features as soon as they become available. These features include persistent caching, faster HMR, and TypeScript-based optimizations. For more details, see Rspack - What's next.

Finally, a big thank you to all the developers who have contributed to Rsbuild ❤️:

May 28, 2024

#Announcing Rsbuild 0.7

Rsbuild 0.7 has been released with Rspack 0.7!

This is the last minor release before the Rsbuild 1.0. After this, the Rspack team will focus on the development of 1.0 and aim to launch the Rspack / Rsbuild 1.0 alpha version soon.

Notable changes in Rsbuild 0.7:

• Support for Storybook
• Faster Sass Compilation
• Better CSS supports
• Typed CSS Modules
• ESM/CJS Exports
• Breaking Changes

#Support for Storybook

Rsbuild now supports Storybook!

storybook-builder-rsbuild is a Storybook builder based on Storybook v8 and Rsbuild that allows you to quickly build your components and stories.

• For projects using Rsbuild, you can now quickly integrate Storybook and reuse your existing Rsbuild config.
• For projects using the Storybook webpack builder, you can now upgrade to Rsbuild and get ~5x faster build performance.

We provide storybook-react-rsbuild and storybook-vue3-rsbuild to support React and Vue 3. For example, to integrate React:

import { StorybookConfig } from 'storybook-react-rsbuild';

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
};

export default config;

For more usage, please refer to storybook-rsbuild repository.

#Faster Sass compilation

In Rsbuild 0.7, Sass compilation is 3~10 times faster. The performance improvements are particularly noticeable on large projects.

Comparison of build times for Rsbuild 0.6 and 0.7 when compiling Bootstrap's Sass code:

This improvement is due to Rsbuild's default use of sass-embedded, a JavaScript wrapper around the native Dart Sass executable that provides a consistent API and superior performance.

Rsbuild has also enabled the latest sass-loader's modern-compiler API. This can enable Sass's shared resources feature, which allows the same compiler process to be reused when compiling multiple files, improving build performance.

#Better CSS supports

Rsbuild now uses CssExtractRspackPlugin to extract CSS into separate files, rather than using the experimental.css config to do so.

This allows Rsbuild to support more CSS features, including:

• Support for using <style module> in the Vue SFC:

<template>
  <p :class="$style.red">Red</p>
</template>

<style module>
  .red {
    color: red;
  }
</style>

• Support for complex CSS Modules :global() syntax

:local(.parent):global(.child) > ul {
  color: red;
}

• Support for more CSS Modules options, such as cssModules.exportGlobals
• Now you can use tools.cssExtract to configure CssExtractRspackPlugin.

#Typed CSS Modules

Rsbuild 0.7 added a new Typed CSS Modules plugin, which is used to generate type declaration files for CSS Modules in the project.

When you use CSS Modules in a TypeScript project, the default type definition is as follows. It can only provide basic type support, and cannot accurately prompt which class names are exported by CSS Modules.

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

After using the Typed CSS Modules plugin, Rsbuild will generate type declaration files for all CSS Modules in the project, providing accurate type hints.

For example, create two files named src/index.ts and src/index.module.css:

import styles from './index.module.css';

console.log(styles.pageHeader);

.page-header {
  color: black;
}

After building, Rsbuild will generate a src/index.module.css.d.ts type declaration file:

interface CssExports {
  'page-header': string;
  pageHeader: string;
}
declare const cssExports: CssExports;
export default cssExports;

Now when you open the src/index.ts file, you can see that the styles object already has an accurate type.

#ESM/CJS Exports

Now, all packages of Rsbuild provide exports in both ES modules and CommonJS formats, and "type"="module" has been declared in the package.json.

This allows you to use import or require to use the JavaScript API of Rsbuild:

// ES module
import { createRsbuild } from '@rsbuild/core';

// CommonJS
const { createRsbuild } = require('@rsbuild/core');

ESM/CJS interop is a tricky issue, so we will provide both formats for a long time to make it easier for more users to use.

#Breaking changes

#Upgrade Rspack to 0.7

Rsbuild has upgraded the dependent Rspack to version 0.7 and adapted to the breaking changes included in it. Typically, these breaking changes will not affect you.

In the new version, Rspack supports lazy compilation, which can significantly improve the dev startup time for large projects. Please refer to Announcing Rspack 0.7 to learn more.

In Rsbuild, you can use dev.lazyCompilation to enable lazy compilation.

#Sass and Less plugins

Rsbuild's Sass and Less plugins are now two separate npm packages instead of being built into @rsbuild/core as before. This change allows users to enable Sass and Less compilation as needed.

For example, projects using CSS solutions such as Tailwind CSS, CSS-in-JS, etc., no longer need to install the dependencies required for Sass and Less, saving about 7MB of disk space.

• If your project requires compiling .scss or .sass files, please install and register the @rsbuild/plugin-sass plugin:

import { pluginSass } from '@rsbuild/plugin-sass';

export default {
  plugins: [pluginSass()],
};

• If your project requires compiling .less files, please install and register the @rsbuild/plugin-less plugin:

import { pluginLess } from '@rsbuild/plugin-less';

export default {
  plugins: [pluginLess()],
};

#dataUriLimit defaults

The default value for output.dataUriLimit has been changed from 10000 (10 kB) to 4096 (4 KiB).

This is because more applications are currently using HTTP 2.0, so splitting assets into separate files would perform better. Meanwhile, inlining assets over 4KiB can make the JS bundle to be too large and not cache friendly.

If you prefer the previous defaults, add the following config:

export default {
  output: {
    dataUriLimit: 10000,
  },
};

April 10, 2024

#Announcing Rsbuild 0.6

Rsbuild 0.6 has been released along with Rspack 0.6!

Notable changes:

• Upgrade to Rspack 0.6
• Error overlay enabled by default
• Support for Vue JSX HMR
• New transform plugin API
• Default port changed to 3000

#Upgrade to Rspack 0.6

Rsbuild has upgraded the dependent Rspack to version 0.6, and adapted the breaking changes of CSS Modules contained in Rspack 0.6.

In the new version, Rspack has enabled the new tree shaking algorithm by default, resulting in a significant improvement in bundle size and artifact stability. Please refer to the Rspack 0.6 release announcement to learn more.

#Error overlay enabled by default

Starting from Rsbuild 0.6, the default value of dev.client.overlay has been adjusted to true. This means that when a compilation error occurs, Rsbuild will pop up the error overlay by default to display the error information:

If you do not need this feature, you can set dev.client.overlay to false to disable it.

export default defineConfig({
  dev: {
    client: {
      overlay: false,
    },
  },
});

#Support for Vue JSX HMR

@rsbuild/plugin-vue-jsx now supports JSX HMR. When you modify JSX code in a Vue 3 application, it will automatically trigger hot module replacement and preserve the current page state.

This feature is implemented by community contributor @liyincode ❤️, and released as a standalone package babel-plugin-vue-jsx-hmr, for use in projects outside of Rsbuild.

#New transform API

Rsbuild plugin now supports the transform API, which can be thought of as a lightweight implementation of Rspack loader. It provides a simple and easy to use API and automatically calls Rspack loader at the backend to transform the code.

In Rsbuild plugins, you can quickly implement code transformation functions using api.transform, which can handle the majority of common scenarios without having to learn how to write an Rspack loader.

For example, match modules with the .pug extension and transform them to JavaScript code:

import pug from 'pug';

const pluginPug = () => ({
  name: 'my-pug-plugin',
  setup(api) {
    api.transform({ test: /\.pug$/ }, ({ code }) => {
      const templateCode = pug.compileClient(code, {});
      return `${templateCode}; module.exports = template;`;
    });
  },
});

For some complex code transformation scenarios, api.transform may not be sufficient. In such situations, you can implement it using the Rspack loader.

#Default port changed to 3000

Rsbuild has changed the default value of server.port from 8080 to 3000.

Port 3000 is commonly used for web development, and is also the default port used by tools such as create-react-app. Changing the default port to 3000 can prevent possible port conflicts when using 8080.

To use port 8080, set it manually as follows:

export default defineConfig({
  server: {
    port: 8080,
  },
});

March 19, 2024

#Announcing Rsbuild 0.5

Rsbuild 0.5 is an important milestone. As of this release, most of the Rsbuild API has reached a stable state and we expect to release Rsbuild 1.0 in Q3 2024.

Main changes:

• ⚡️ Support for Lightning CSS to speed up CSS compilation.
• 🌟 Support for custom server based on the new JavaScript API.
• 🍭 Refactor the SVGR plugin to support more usages.
• 📍 Support for custom minify options.

#⚡️ Supports Lightning CSS

Lightning CSS is a high performance CSS parser, transformer and minifier written in Rust. It supports parsing and transforming many modern CSS features into syntax supported by target browsers, and also provides a better compression ratio.

Rsbuild provides the Lightning CSS plugin to use Lightning CSS on an opt-in basis, replacing the built-in PostCSS, autoprefixer, and SWC CSS minimizer in Rsbuild.

All you need to do is register the Lightning CSS plugin in the Rsbuild configuration to complete the switch:

import { pluginLightningcss } from '@rsbuild/plugin-lightningcss';

export default {
  plugins: [pluginLightningcss()],
};

In a real large-scale web application, we have integrated the Rsbuild Lightning CSS plugin and used Rsdoctor to analyze the changes in build time:

• CSS compilation time was reduced from 8.4s to 0.12s, a 70x improvement.
• The overall build time was reduced from 33.1s to 25.4s, a 30% increase.

#🌟 Support for custom server

Rsbuild now supports replacing the dev server with a custom server that reuses Rsbuild's page preview, routing, and module hot update features. This makes it easier to integrate Rsbuild with other Node.js frameworks.

For example, you can implement a custom server based on express:

import express from 'express';
import { createRsbuild } from '@rsbuild/core';

async function startCustomServer() {
  const app = express();
  const rsbuild = await createRsbuild({
    config: {
      server: {
        middlewareMode: true,
      },
    },
  });
  const { port, middlewares } = await rsbuild.createDevServer();

  app.use(middlewares);
  app.listen(port);
}

For more details, please refer to Rsbuild - createDevServer.

#🍭 Refactoring SVGR plugin

In versions prior to 0.5.0, the default usage of the SVGR plugin was the same as create-react-app, allowing SVGs to be used via mixed import:

import logoUrl, { ReactComponent as Logo } from './logo.svg';

console.log(logoUrl); // -> string
console.log(Logo); // -> React component

However, there are two problems with this approach:

1. Increased bundle size: Mixed import causes a single SVG module to be compiled into two types of code (even if some exports are not used), which will increase the bundle size.
2. Slow down compiling: Mixed import will cause extra compilation overhead. Even if the ReactComponent export is not used in the code, the SVG file will still be compiled by SVGR. And SVGR is based on Babel, which has a high performance overhead.

So we have refactored the @rsbuild/plugin-svgr plugin to support converting SVGs to React components via the ?react query. This approach can solve the problems mentioned above, and is more in line with community best practices.

import logoUrl from './logo.svg';
import Logo from './logo.svg?react';

console.log(logoUrl); // -> string
console.log(Logo); // -> React component

The SVGR plugin now supports switching between different SVGR usages. If a project needs to use the previous mixed import usage, you can manually enable the mixedImport option:

pluginSvgr({
  mixedImport: true,
});

#📍 Custom minify options

The output.disableMinimize option has been renamed to output.minify, and it allows customizing JS and HTML minification options.

export default {
  output: {
    minify: {
      jsOptions: {
        minimizerOptions: {
          mangle: false,
        },
      },
    },
  },
};

Projects using output.disableMinimize can refer to the example below:

export default {
  output: {
    disableMinimize: true,
    minify: false,
  },
};

See "allow customize minify options".

For more information, please refer to:

• Rsbuild 0.5.0 Changelog
• Rsbuild 0.5.0 Breaking Changes

February 06, 2024

#Announcing Rsbuild 0.4

Rsbuild 0.4 provides built-in support for module federation. It also contains some incompatible API updates. Please refer to the current document for upgrading.

#Module Federation config

Rsbuild now provides a built-in moduleFederation option, which will make configuring Module Federation in Rsbuild much easier.

• Example:

export default defineConfig({
  moduleFederation: {
    options: {
      // ModuleFederationPluginOptions
    },
  },
});

When you use this option, Rsbuild will automatically set the default publicPath and splitChunks config, making module federation ready to use out of the box.

See RFC - Provide first-class support for Module Federation for details.

#Plugin hook order

In Rsbuild plugin, you can now declare the order of hooks using the order field:

const myPlugin = () => ({
  setup(api) {
    api.modifyRsbuildConfig({
      handler: () => console.log('hello'),
      order: 'pre',
    });
  },
});

For more details, see Plugin Hooks.

#Rename disableFilenameHash

The output.disableFilenameHash config has been renamed to output.filenameHash.

• Before:

export default {
  output: {
    disableFilenameHash: true,
  },
};

• After:

export default {
  output: {
    filenameHash: false,
  },
};

#Remove postcss-flexbugs-fixes

Rsbuild 0.4 removed the built-in postcss-flexbugs-fixes plugin.

This plugin is used to fix some flex bugs for IE 10 / 11. Considering that modern browsers no longer have these flex issues, we removed this plugin to improve build performance.

If your project needs to be compatible with IE 10 / 11 and encounters these flex issues, you can manually add this plugin in Rsbuild:

• Install plugin:

npm add postcss-flexbugs-fixes -D

• Register plugin in postcss.config.cjs:

module.exports = {
  'postcss-flexbugs-fixes': {},
};

#Pure React plugin

The React plugin has removed default source.transformImport config for antd v4 and @arco-design/web-react.

Configurations related to the UI library should be provided in the UI library-specific plugins, such as rsbuild-plugin-antd or rsbuild-plugin-arco, and the React plugin will concentrate on providing fundamental abilities for React.

• If your project is using antd v3 or v4, you can manually add the following config:

export default {
  source: {
    transformImport: [
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
      },
    ],
  },
};

• If your project is using @arco-design/web-react, you can manually add the following config:

export default {
  source: {
    transformImport: [
      {
        libraryName: '@arco-design/web-react',
        libraryDirectory: 'es',
        camelToDashComponentName: false,
        style: 'css',
      },
      {
        libraryName: '@arco-design/web-react/icon',
        libraryDirectory: 'react-icon',
        camelToDashComponentName: false,
      },
    ],
  },
};

#JavaScript API

The loadConfig method now returns both the contents of the config and the path to the config file:

import { loadConfig } from '@rsbuild/core';

// 0.3
const config = await loadConfig();

// 0.4
const { content, filePath } = await loadConfig();

January 10, 2024

#Announcing Rsbuild 0.3

Rsbuild 0.3 version has upgraded Rspack to 0.5 and now supports Module Federation. In addition, it includes some incompatible API changes. Please refer to the current documentation for upgrading.

#Rspack 0.5

Bump Rspack to v0.5.0, see: Rspack 0.5 Release Announcement

Notable changes:

• Module Federation added to Rspack
• Remove deprecated builtins options

#TOML / YAML plugin

The need to import TOML and YAML in JS is not common, so Rsbuild core will no longer support import TOML and YAML by default in v0.3.0.

The TOML and YAML plugin will become a independent plugin:

• TOML:

// rsbuild.config.ts
import { pluginToml } from '@rsbuild/plugin-toml';

export default {
  plugins: [pluginToml()],
};

• YAML:

// rsbuild.config.ts
import { pluginYaml } from '@rsbuild/plugin-yaml';

export default {
  plugins: [pluginYaml()],
};

#JavaScript API

Some JavaScript APIs have changed:

• The printURLs option of rsbuild.startDevServer is deprecated, use server.printUrls instead.
• The logger option of rsbuild.startDevServer is deprecated, use logger.override() instead.

#Node target

• Adjust default browserslist for node target, from node >= 14 to node >= 16.
• The default value of output.distPath.server is changed from 'bundles' to 'server'

December 11, 2023

#Announcing Rsbuild 0.2

The Rsbuild 0.2 contains some incompatible API changes. Please refer to the current documentation for upgrading.

#Targets

We will move the target option of createRsbuild to rsbuild config, this change allows user to configure targets in the rsbuild config file.

• before:

const rsbuild = await createRsbuild({
  target: ['web', 'node'],
});

• after:

// rsbuild.config.ts
export default {
  output: {
    targets: ['web', 'node'],
  },
};

Only affect JavaScript API. Users using the Rsbuild CLI do not need to change.

#Entry

Remove the deprecated source.entries config.

source.entries has been renamed to source.entry since Rsbuild 0.1.0, and we will remove the legacy source.entries config in Rsbuild v0.2.0.

• before:

// rsbuild.config.ts
export default {
  source: {
    entries: {},
  },
};

• after:

// rsbuild.config.ts
export default {
  source: {
    entry: {},
  },
};

#Write to disk

dev.writeToDisk defaults to false.

Motivation:

• Reduce fs overhead and improve dev server performance.
• Avoid trigger watcher of UnoCSS and other tools. See #654.
• Align the default behavior with webpack-dev-middleware and other community dev servers.

User can enable writeToDisk manually:

export default {
  dev: {
    writeToDisk: true,
  },
};

#Babel plugin

@rsbuild/plugin-babel will move all babel-loader options to babelLoaderOptions:

• before:

pluginBabel({
  plugins: [],
  presets: [],
});

• after:

pluginBabel([
  babelLoaderOptions: {
    plugins: [],
    presets: [],
  }
]);

This change allows us to add more options for pluginBabel, such as include and exclude.

#Source map

output.disableSourceMap has been renamed to output.sourceMap.

• before:

export default {
  output: {
    disableSourceMap: {
      js: true,
      css: true,
    },
  },
};

• after:

export default {
  output: {
    sourceMap: {
      js: false,
      css: false,
    },
  },
};

The default value of source map has also been updated to improve build performance.

• before: generate JS / CSS source map in development, generate JS source map in production.
• after: generate JS source map in development, no source map are generated in production.

#Inject styles

Rename output.disableCssExtract to output.injectStyles to be clearer:

• before:

export default {
  output: {
    disableCssExtract: true,
  },
};

• after:

export default {
  output: {
    injectStyles: true,
  },
};

November 22, 2023

#Announcing Rsbuild 0.1

We are pleased to announce the release of Rsbuild 0.1!

Rsbuild is an Rspack-based build tool, designed to be an enhanced Rspack CLI that is both more user friendly and out-of-the-box. Rsbuild is the ideal solution for those looking to migrate from webpack to Rspack. It significantly reduces configuration by 90% while offering a 10x build speed.

#🚀 Performance

The build performance of Rsbuild is on par with native Rspack. Considering that Rsbuild includes more out-of-the-box features, its performance will be slightly lower than Rspack.

Time to build a large web application:

The data is based on the benchmark built by the Farm team, more info in build-tools-performance.

#🔥 Features

Rsbuild has the following features:

• Easy to Configure: One of the goals of Rsbuild is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start a web project with zero configuration. In addition, Rsbuild provides semantic build configuration to reduce the learning curve for Rspack configuration.

• Performance Oriented: Rsbuild integrates high-performance Rust-based tools from the community, including Rspack, SWC and Lightning CSS, to deliver top-notch build speed and development experience. Compared to webpack-based tools like Create React App and Vue CLI, Rsbuild provides 5 to 10 times faster build performance and lighter dependencies.

• Plugin Ecosystem: Rsbuild has a lightweight plugin system and includes a range of high-quality official plugins. Furthermore, Rsbuild is compatible with most webpack plugins and all Rspack plugins, allowing users to leverage existing community or in-house plugins in Rsbuild without the need for rewriting code.

• Stable Artifacts: Rsbuild is designed with a strong focus on the stability of build artifacts. It ensures high consistency between artifacts in the development and production builds, and automatically completes syntax downgrading and polyfill injection. Rsbuild also provides plugins for type checking and artifact syntax validation to prevent quality and compatibility issues in production code.

• Framework Agnostic: Rsbuild is not coupled with any front-end UI framework. It supports frameworks like React, Vue, Svelte, Solid and Preact through plugins, and plans to support more UI frameworks from the community in the future.

#💡 Next step

Currently, Rsbuild is still evolving rapidly and plans to introduce many more powerful new features.

For example, we are developing Rsdoctor, a robust build analysis tool that can be used with all Rspack and webpack projects. It will provide a visual user interface to help developers analyze build times, duplicate dependencies, code transformation processes, and more, making it easier to locate and resolve build issues.

We will be releasing the first working version of Rsdoctor soon. Thereafter, Rsbuild will iterate in sync with Rspack, with plans to release version 1.0 in the first half of 2024.