Rsbuild と Rspack の違いを調べる(おまけで Vite との比較も)
Keita Hino背景
少し前に Rsbuild と Rspack の v1 がリリースされた🎉
どちらも名前は知っているものの、どのような違いがあるのか分からなかったので調べてみる。
Rsbuild Rspack
Keita HinoRspack とは
まとめ
- Webpack との互換性が高い
- Webpack より高速
Webpack との互換性が高い
For the 50 most downloaded webpack plugins, more than 80% can be used in Rspack or have an alternative.
最もダウンロードされている 50 個の Webpack Plugin のうち、80% は Rspack で使用できる or 代替手段があるとのこと。
変わったことをしてなければ、使える段階まで来てるのかも？
Rspack v1 でプロジェクトを作成し、設定ファイルを確認してみたところ、確かに Webpack っぽさがある。
Rspack の設定ファイル
import { defineConfig } from "@rspack/cli";
import { rspack } from "@rspack/core";
import * as RefreshPlugin from "@rspack/plugin-react-refresh";
const isDev = process.env.NODE_ENV === "development";
// Target browsers, see: https://github.com/browserslist/browserslist
const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];
export default defineConfig({
context: __dirname,
entry: {
main: "./src/main.tsx"
},
resolve: {
extensions: ["...", ".ts", ".tsx", ".jsx"]
},
module: {
rules: [
{
test: /\.svg$/,
type: "asset"
},
{
test: /\.(jsx?|tsx?)$/,
use: [
{
loader: "builtin:swc-loader",
options: {
jsc: {
parser: {
syntax: "typescript",
tsx: true
},
transform: {
react: {
runtime: "automatic",
development: isDev,
refresh: isDev
}
}
},
env: { targets }
}
}
]
}
]
},
plugins: [
new rspack.HtmlRspackPlugin({
template: "./index.html"
}),
isDev ? new RefreshPlugin() : null
].filter(Boolean),
optimization: {
minimizer: [
new rspack.SwcJsMinimizerRspackPlugin(),
new rspack.LightningCssMinimizerRspackPlugin({
minimizerOptions: { targets }
})
]
},
experiments: {
css: true
}
});
Webpack より高速
下記は 1000 コンポーネントをビルドした時のパフォーマンスの比較とのことで、Webpack v5 は 6.52s なのに対し、Rspack 1.0 は 0.28s なので、この例で言えば約20倍高速です。
https://rspack.dev/blog/announcing-1-0#better-performance
Keita HinoRsbuild とは
まとめ
- Rspack よりさらに高速
- プラグインの作成が容易
Rspack よりさらに速い
Rsbuild のリリースノートに各ツールとのパフォーマンス比較が載っていた。
1000 モジュールある時に Rspack と比べると、
- 開発サーバーの起動は 1.6倍高速
- ビルド時間 1.8倍高速
とのこと。すごい...!
プラグインの作成が容易
Rspack と Rsbuild の比較が載っていたが、確かに Rsbuild の方が短め。
https://rsbuild.dev/community/releases/v1-0#plugin-ecosystem
余談
Rspack は設定ファイルが Webpack 風だったが、Rsbuild の設定ファイルは Vite の設定ファイルとほぼ同じだった。
Rsbuild の設定ファイル
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
export default defineConfig({
plugins: [pluginReact()],
});
使い分け
両者、それぞれ特徴があったので、下記のような使い分けになりそう？
- Webpack を使っているかつ、Webpack の設定ファイルが巨大な場合 -> Rspack が良さそう
- 新規プロジェクト -> Rsbuild が良さそう
Keita Hino（おまけ）Vite と Rsbuild の比較
Rspack と Rsbuild を比較した場合は Rsbuild の方が新規プロジェクトに向いてそうだが、それ以外のツールも含めると Vite も選択肢に入ってくる。
なので、Vite と Rsbuild も比べてみる。（ここでは Rsbuild 側のメリットのみ）
Rsbuild v1 のリリースノートに Vite の問題点が述べられていた。
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.
ざっくりまとめると下記の3点
- Webpack からの移行コストが高い
- development と production の不一致
- 大規模アプリケーションだと development 時にページ更新の遅延する
2.については Vite 側でも問題を解決するために Rolldown を開発していて将来的に解消するかもしれないので、それ以外の 1, 3 を見てみる。
Webpack からの移行コストが高い
Rsbuild の場合は公式から Webpack からのマイグレーションガイドが用意されていたので、上から順に対応していけば良さそう。（試せてないので、すんなりいくかは不明）
一方、Vite は公式からマイグレーションガイドが用意されていない。
また、Rsbuild の場合は Rspack の設定も使えるらしいので、Rsbuild の設定ファイルでは難しそうなものも回避できるかもしれない。
大規模アプリケーションだと development 時にページ更新の遅延する
Vite と Rsbuild のパフォーマンスを比較すると、開発サーバーの起動は Vite より約3倍高速で、ビルド時間は約4倍高速とのこと。
ページ更新は比較できてないが、下記のベンチマーク上では確かに Rsbuild の方がパフォーマンス良さそう。