Notable changes in Rsbuild v0.7.0

[chenjiahan]

This thread is used to collect planned breaking changes and notable changes for Rsbuild v0.7.0.

[chenjiahan]

Upgrade Rspack v0.7.0

Rsbuild v0.7 will upgrade the dependent @rspack/core to v0.7.0.

Rspack v0.7.0 contains some breaking changes, see web-infra-dev/rspack#6218 for more details.

[chenjiahan]

Sass/Less Plugins

In Rsbuild < 0.7.0, Sass and Less are supported by @rsbuild/core, which means that projects that do not use Sass and Less must also install these dependencies.

Starting with Rsbuild v0.7.0, @rsbuild/core will no longer provide builtin support for Sass and Less. Instead, you can install @rsbuild/plugin-sass and @rsbuild/plugin-less if you need to use Sass or Less.

And @rsbuild/plugin-sass is faster than before. It uses the modern-compiler value of sass-loader together with sass-embedded reducing compilation time by 5-10 times, especially for projects with large files with a lot of @import/@use, for small files the build time reduction will not be significant.

Sass

• Install:

npm i @rsbuild/plugin-sass -D

• Configure:

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

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

Less

• Install:

npm i @rsbuild/plugin-less -D

• Configure:

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

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

[chenjiahan]

https://x.com/rspack_dev/status/1792821117687943556

[chenjiahan]

Use CssExtractRspackPlugin

From Rsbuild v0.7, it will use CssExtractRspackPlugin to extract CSS into separate files, rather than using experimental.css to do so.

This allows Rsbuild to support more CSS features, including:

• Support for CSS Modules :global() syntax
• Support using <style module> in Vue SFC
• Support for more CSS Modules options
• Some bug fixes

[chenjiahan]

#1577

[9aoy]

Add @rsbuild/plugin-typed-css-modules

Add @rsbuild/plugin-typed-css-modules to support generating TypeScript declaration file for CSS modules.

See: #2340

[chenjiahan]

Dual ESM/CJS packages

All packages of Rsbuild now provides both CommonJS and ES module JavaScript bundles, with "type"="module" 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');

[chenjiahan]

Remove @rsbuild/monorepo-utils

@rsbuild/monorepo-utils is an internal package and has been removed in v0.7.0.

Its code has been merged into @rsbuild/plugin-source-build.

[chenjiahan]

output.dataUriLimit defaults to 4096

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

This is because more applications are currently using HTTP2.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.

[chenjiahan]

#2338