RsbuildはRspackとRust系ツールを束ねるWebビルド基盤

Rspackを中心にした設定の入口

RsbuildはRspackを使う現代的なWebアプリケーション向けビルドツールです。READMEは、ゼロ設定で始められることと、Rspackの学習曲線を抑える意味を持つセマンティックな設定APIを特徴として挙げています。設定を減らすことだけでなく、プロジェクト間で読み方を揃えることが狙いです。

採用判断では、既存アプリの入口、静的資産、環境変数、出力先をRsbuildの設定APIで表現できるかを先に確認します。READMEは具体的なインストール例や設定全一覧を掲載していないため、コマンドやオプションはrsbuild.rsのv2文書に合わせて固定します。

Rsbuildでは、生成物をgit差分で確認できる小さなサンプルを用意します。開発時のHMR、画像とフォントの参照、production出力のminify、対象ブラウザでの構文実行を分けて調べ、RspackやSWCの更新で差分が出たときにどの依存を戻すかを決めます。

速度の根拠はRust製ツールの組み合わせ

パフォーマンス面では、RustベースのRspack、SWC、Lightning CSSを統合すると説明されています。これはツールチェーンの構成に関するREADMEの説明であり、特定プロジェクトで何倍速くなるかという測定結果ではありません。

速度を評価するなら、同一の依存関係、キャッシュ状態、CPU、入力ファイルで開発起動と本番ビルドの時間を測ります。キャッシュを消した場合と再利用した場合を分け、出力ファイルの内容とサイズも比較します。READMEにベンチマーク値がない以上、一般的な速度主張を自社の性能保証に変換してはいけません。

Rsbuildの移行では、既存webpack設定のうちloader、plugin、alias、splitChunksに相当する部分を一覧化します。変換結果が同じでも警告や開発時の挙動が変わる場合があるため、主要画面のスクリーンショットとブラウザコンソールも比較します。

webpack資産を活用できるプラグイン層

Rsbuildには軽量なプラグインシステムがあり、公式プラグインも提供されます。READMEは、ほとんどのwebpackプラグインとすべてのRspackプラグインに互換性があると説明しています。既存の社内プラグインを移行候補にできる点は、置き換え時の検討事項です。

ここでの互換性は、各プラグインの設定と副作用まで無条件に一致するという意味ではありません。実際に使うプラグインを一つずつ有効化し、ビルドログ、生成HTML、分割チャンク、開発サーバーの挙動を比較します。依存するwebpack APIが何かを確認してから移行範囲を決めます。

UIフレームワークを固定しない

READMEはReact、Vue、Svelte、Solid、Preactをプラグイン経由でサポートするとしています。Rsbuild自体が特定のUIフレームワークへ結び付かないため、組織内で複数のフレームワークを使う場合もビルドの考え方を合わせやすくなります。

一方、フレームワーク用プラグインが提供する機能、SSR、テスト、型検査の範囲はプロジェクトごとに異なります。対象アプリのルーティング、CSS処理、環境別出力を最小アプリで再現し、v2文書とプラグインのREADMEを参照して不足する設定を洗い出します。

開発と本番の成果物を同じ視点で見る

Rsbuildは、開発と本番で一貫した成果物を重視し、構文のダウングレードとポリフィル注入を自動処理するとREADMEにあります。型チェックと成果物の構文検証を行うプラグインも案内されています。

確認対象は、対応ブラウザ向けに変換された構文、必要なポリフィル、型エラー、生成されたアセットのパスです。READMEの主張をそのまま受けず、対象ブラウザを決めて生成物を検査します。開発サーバーで動いても本番出力が同じ互換性を持つとは限らないため、両方をCIで確認する設計が必要です。

Rstackの一員として選ぶべきか

RsbuildはRstackの一部で、Rspack、Rslib、Rspress、Rsdoctor、Rstest、Rslintと並びます。ビルドだけでなく、ライブラリ、静的サイト、分析、テスト、Lintまで同じ系統のツールを選べる構成です。ライセンスはMITです。

この連携が有効なのは、既存のJavaScript工程をRstackへ寄せる計画がある場合です。Rsbuild単体の導入でも、依存するRspackのバージョンと公式プラグインの対応を固定し、生成物の差分を確認します。速度や移行容易性を重視する場合も、最終的な判断は自社アプリのビルド入力と出力で行うべきです。

Rsbuildを既存アプリへ入れる場合は、入口ファイル、CSS、画像、動的import、環境変数を含む小さな代表ケースを用意します。Rspackプラグインとwebpackプラグインを別々に有効化し、ビルドが成功したかだけでなく、出力HTMLのscript属性、チャンク名、CSSの構文、ブラウザでの実行結果を確認します。TypeScriptの型エラーを検出するプラグインと成果物の構文検証をCIへ加えたとき、開発者のローカル結果と本番パイプラインの結果が一致するかも判定材料です。

編集部の結論

RsbuildはReact、Vue、Svelteなどのフロントエンドを、Rspack系のビルド経路で構築したいチーム向けです。webpack固有の挙動を完全に同じだと期待する移行には注意が要ります。採用前にRsbuild v2の公式ドキュメントにある最小構成を作り、開発と本番の成果物、構文のダウングレード、既存プラグインの結果を同じ入力で比較してください。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes