【アールエスパック】

Rspack とは?

最終更新:
💡 Rustでビルドを効率化する、Webpack互換のバンドラー

Rustで実装されたWeb向けのバンドラー。Webpackの多くのAPIとの互換性を持ち、並列処理や差分の再利用でビルドを効率化する。速度や移行に必要な変更はプロジェクトによって異なる。

📌 このページのポイント
依存関係を処理し、配布用ファイルへJSTSCSSRspack並列処理差分を再利用JSCSS入力の例出力の例設定の互換性と速度は、自分の構成で確認
入力と出力の種類は構成例です。必要なローダーやプラグインを設定します。Webpackとの完全互換や、固定の速度倍率を示す図ではありません。
ひよこ ひよこ
Rspackって何をするツール?
ペンギン先生 ペンギン先生
WebアプリのJavaScriptやCSSなどを処理して、配布用のファイルを作るバンドラーだよ。Webpackの多くのAPIに対応しながら、Rustで処理を実装しているんだ
ひよこ ひよこ
Rust製なら、必ず何倍も速くなる?
ペンギン先生 ペンギン先生
固定の倍率は言えないよ。並列処理や、変更のない処理結果を再利用する仕組みで効率化するけれど、コードの規模、ローダー、プラグイン、キャッシュや端末によって結果は変わる。初回のビルドと変更後の再ビルドを、同じ条件で測ろう
ひよこ ひよこ
Webpackからは、そのまま移せる?
ペンギン先生 ペンギン先生
設定を活かせる部分は多いけれど、完全に同じではないよ。公式の移行ガイドに沿って、パッケージや設定ファイル、プラグインを確認する。例えば設定内でwebpackのAPIを呼んでいる箇所や、キャッシュの設定は見直しが必要になることがあるんだ
ひよこ ひよこ
ローダーやプラグインも全部使える?
ペンギン先生 ペンギン先生
Webpackのローダーには広く対応しているけれど、全てのプラグインが対応するとは限らない。Rspack側の対応状況を調べ、専用の実装へ置き換えるものがないか確認しよう。設定が読めることと、出力や開発時の動作が同じことも別だよ
ひよこ ひよこ
導入するときは何を確かめる?
ペンギン先生 ペンギン先生
ビルド時間だけでなく、配布ファイルやソースマップ、開発サーバー、変更反映、必要なプラグインも確かめよう。公式は本番利用向けとして案内しているけれど、自分のアプリでの確認は必要だよ。移行前後で同じテストを実行すると比較しやすいんだ
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Rspack」って出てきたら「Rustでビルドを効率化する、Webpack互換のWebバンドラー」と思えばだいたいOK!
📖 おまけ:英語の意味
「Rspack」 = Rustで実装されたWebバンドラーの名前
💬 ByteDanceで始まったプロジェクトだよ。WebpackのAPIとの互換性を重視しながら、Rustで実装することでビルドの効率化を目指しているんだ

参考資料

← 用語集にもどる