Rsbuildがフロントエンドビルドの新定番になりつつある理由

はじめに

Webpackの設定ファイルが数百行に膨れ上がり、プラグインの組み合わせ地獄に頭を抱えた経験はありませんか。Viteに乗り換えてみたものの、本番ビルドの速度やSSR周りの挙動でどこか物足りなさを感じている方もいるかもしれません。

Rsbuildは、そうしたビルドツール選びの悩みに対して「Rust製バンドラーの速さ」と「ゼロコンフィグの手軽さ」を両立させることで応えようとしているプロジェクトです。本記事では、Rsbuildの特徴からインストール、実際のコード例までを順を追って解説します。

Rsbuildとは

Rsbuildは、Rust製の高速バンドラー「Rspack」を基盤に構築されたビルドツールです。ByteDanceのweb-infra-devチームによって開発されており、Rspack・SWC・Lightning CSSといったRust製ツールチェーンを統合することで、Webpackベースのプロジェクトを大幅に高速化しつつ、Viteに匹敵する開発体験を提供します。

「Rstack」と呼ばれる統一JavaScriptツールチェーン群の中核を担うツールの一つで、React・Vue・Svelte・Solid・Preactなど主要なUIフレームワークにプラグイン経由で対応しているのも特徴です。

主な特徴

ゼロコンフィグで開始できる - 設定ファイルなしでもすぐにプロジェクトを立ち上げられ、必要に応じてrsbuild.config.tsで細かくカスタマイズできます
Rust製ツールチェーンによる高速化 - バンドルにRspack、トランスパイルにSWC、CSS処理にLightning CSSを採用し、開発・本番ビルドの両方で高速な処理を実現します
フレームワーク非依存の設計 - 公式プラグインを追加するだけでReactやVueなど任意のフレームワークに対応でき、特定のフレームワークにロックインされません
開発・本番で一貫した出力 - HMR対応の開発サーバーと本番ビルドの挙動差を最小限に抑え、「開発環境では動くのに本番で壊れる」問題を減らします

インストール

create-rsbuildを使うと、対話形式で新規プロジェクトをすぐに作成できます。

# npmの場合
npm create rsbuild@latest

# yarnの場合
yarn create rsbuild

# pnpmの場合
pnpm create rsbuild@latest

既存プロジェクトに導入する場合は、コア本体とフレームワーク用プラグインを個別にインストールします。Reactを使う例は以下の通りです。

npm add -D @rsbuild/core @rsbuild/plugin-react

基本的な使い方

プロジェクトルートにrsbuild.config.tsを作成し、使用するプラグインを登録します。

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
  source: {
    entry: {
      index: './src/index.tsx',
    },
  },
  server: {
    port: 3000,
  },
});

package.jsonにコマンドを追加すれば、開発サーバーの起動と本番ビルドが行えます。

{
  "scripts": {
    "dev": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview"
  }
}

npm run dev

上記を実行すると、HMR対応の開発サーバーが立ち上がり、ファイルを保存するたびに変更が即座にブラウザへ反映されます。

実践的なユースケース

既存のWebpackプロジェクトからRsbuildへ移行する際によく使われるのが、環境ごとの出力先やパスエイリアスの設定です。以下は、TypeScriptのパスエイリアスと静的アセットの出力先をカスタマイズした例です。

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
  source: {
    alias: {
      '@': './src',
      '@components': './src/components',
    },
  },
  output: {
    distPath: {
      root: 'dist',
      js: 'static/js',
      css: 'static/css',
    },
  },
  html: {
    title: 'My Rsbuild App',
  },
});

複数の環境（例えばSSR用とクライアント用）を同一プロジェクトで扱いたい場合は、environmentsオプションを使って設定を切り分けられます。

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  environments: {
    web: {
      source: {
        entry: { index: './src/index.client.tsx' },
      },
      output: {
        target: 'web',
      },
    },
    node: {
      source: {
        entry: { index: './src/index.server.tsx' },
      },
      output: {
        target: 'node',
      },
      plugins: [pluginReact()],
    },
  },
});

このように1つの設定ファイルの中でクライアント向け・サーバー向けのビルドを分離でき、SSRやマイクロフロントエンド構成にも柔軟に対応できます。

まとめ

Rsbuildは、Rspackが持つRust製バンドラーとしての速さを土台に、ゼロコンフィグで始められる手軽さと、必要に応じて細部までカスタマイズできる柔軟性を兼ね備えたビルドツールです。Webpackの複雑な設定に疲れている方、Viteからの乗り換えを検討している方のどちらにとっても、試してみる価値のある選択肢だと言えるでしょう。

まずはcreate-rsbuildで小さなプロジェクトを立ち上げ、開発サーバーの起動速度やHMRの快適さを体感してみてください。