HMRは160ms。webpack互換のRust製バンドラーRspackの実力

はじめに

「webpackのビルドが遅すぎて、コーヒーを淹れに行く時間ができてしまう」——大規模なフロントエンドプロジェクトに携わったことがある方なら、一度は経験があるのではないでしょうか。かといってViteやesbuildに乗り換えようにも、長年積み上げてきたwebpackの設定やプラグイン資産を捨てるのは現実的ではない。そんなジレンマを抱えたチームは少なくないはずです。

そこで注目したいのが**Rspack（アールエスパック）**です。Rust製の高速なバンドラーでありながら、webpackのAPIと高い互換性を持つため、既存の設定をほぼそのまま流用して移行できます。公式ベンチマークでは開発サーバーの起動が約1.4秒、HMR（Hot Module Replacement：コードを変更した際にページ全体をリロードせず差分だけを反映する仕組み）はわずか160ミリ秒という数字が示されています。

この記事では、Rspackの特徴からインストール、webpackプロジェクトからの移行方法までを、実際に動くコード例とともに紹介します。

Rspackとは

Rspackは、ByteDanceのWeb Infraチームが開発するRust製のWebバンドラーです。「webpackエコシステムとの互換性」を最重要視して設計されており、webpackのローダーやプラグインの多くがそのまま動作します。2026年7月時点で最新バージョンはv2系に到達し、GitHubのスター数は12,000を超えるなど、着実にコミュニティを広げています。

また、Rspackは単体のバンドラーにとどまらず、Rstackと呼ばれる統一ツールチェーンの中核でもあります。ゼロコンフィグで使えるビルドツールのRsbuild、ライブラリ開発向けのRslib、静的サイトジェネレータのRspress、ビルド分析ツールのRsdoctorなど、周辺ツールが揃っているのも心強いポイントです。

主な特徴

Rustによる高速なビルド - 並列化されたアーキテクチャにより、コールドスタートからプロダクションビルドまで一貫して高速です。
インクリメンタルビルドによる爆速HMR - 変更された部分だけを再コンパイルするため、プロジェクトが大規模化してもHMRの速度が落ちにくい設計です。
webpack互換のAPI - entryやmodule.rules、pluginsといった見慣れた設定がほぼそのまま使えます。既存のwebpackプラグイン・ローダーの多くと互換性があります。
Module Federationサポート - マイクロフロントエンドの実現に欠かせないModule Federationを標準サポートしています。
主要機能を標準装備 - Tree Shaking、コード分割、ミニファイ、TypeScript/JSXの変換（SWCベース）などが組み込みで提供され、追加のローダー設定を減らせます。

インストール

npm / yarn / pnpm のいずれでもインストールできます。CLIとコアをあわせて導入します。

# npm
npm install -D @rspack/core @rspack/cli

# yarn
yarn add -D @rspack/core @rspack/cli

# pnpm
pnpm add -D @rspack/core @rspack/cli

新規プロジェクトであれば、スキャフォールディングツールを使うのが最も手軽です。

npm create rspack@latest

対話形式でReactやVueなどのテンプレートを選ぶだけで、すぐに開発を始められる構成が生成されます。

基本的な使い方

まずは最小構成から見ていきましょう。プロジェクトルートに rspack.config.mjs を作成します。

// rspack.config.mjs
import { defineConfig } from '@rspack/cli';

export default defineConfig({
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: '[name].js',
    clean: true,
  },
});

webpackを使ったことがある方なら「ほぼ同じでは？」と感じたはずです。それこそがRspackの狙いで、学習コストを最小限に抑えながら速度だけを手に入れられます。

package.json にスクリプトを追加します。

{
  "scripts": {
    "dev": "rspack dev",
    "build": "rspack build"
  }
}

npm run dev で開発サーバーが起動し、npm run build でプロダクションビルドが実行されます。

TypeScript + Reactをビルドする

Rspackの真価が分かるのが、TypeScriptやJSXの扱いです。webpackでは babel-loader や ts-loader を組み合わせる必要がありましたが、RspackにはSWC（Rust製の高速トランスパイラ）が組み込まれているため、builtin:swc-loader を指定するだけで完結します。

// rspack.config.mjs
import { defineConfig } from '@rspack/cli';
import { rspack } from '@rspack/core';

export default defineConfig({
  entry: {
    main: './src/index.tsx',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'typescript',
              tsx: true,
            },
            transform: {
              react: {
                runtime: 'automatic',
              },
            },
          },
        },
      },
      {
        test: /\.css$/,
        type: 'css', // CSSも組み込みサポート
      },
    ],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: './index.html',
    }),
  ],
});

注目してほしいのは HtmlRspackPlugin です。webpackでは別途 html-webpack-plugin をインストールする必要がありましたが、Rspackでは主要なプラグインがRust実装で組み込まれており、依存パッケージを減らしつつ高速に動作します。

実践的なユースケース

webpackプロジェクトからの移行

Rspackが最も輝くのは、既存のwebpackプロジェクトの高速化です。移行手順は驚くほどシンプルです。

1. パッケージを入れ替える

npm uninstall webpack webpack-cli webpack-dev-server
npm install -D @rspack/core @rspack/cli

2. 設定ファイルを読み替える

webpack.config.js を rspack.config.mjs にリネームし、webpack固有のプラグインを組み込み版に置き換えます。

// 移行前（webpack）
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({ template: './index.html' }),
    new CopyPlugin({ patterns: [{ from: 'public' }] }),
  ],
};

// 移行後（Rspack）
import { rspack } from '@rspack/core';

export default {
  plugins: [
    new rspack.HtmlRspackPlugin({ template: './index.html' }),
    new rspack.CopyRspackPlugin({ patterns: [{ from: 'public' }] }),
  ],
};

DefinePlugin や ProvidePlugin なども rspack.DefinePlugin のように組み込みで用意されています。互換性のないプラグインに出会った場合も、公式ドキュメントに代替手段の一覧がまとまっているため、移行の道筋を立てやすいのが助かります。

3. ビルドして差分を確認する

あとは rspack build を実行し、出力に問題がないかを確認するだけです。中規模以上のプロジェクトであれば、ビルド時間が数分の一になるケースも珍しくありません。

コード分割で初期ロードを最適化する

RspackはwebpackスタイルのDynamic Importによるコード分割にも対応しています。管理画面など、初期表示に不要な重いモジュールを遅延読み込みする例です。

// src/index.js
const button = document.getElementById('open-editor');

button.addEventListener('click', async () => {
  // クリックされて初めてエディタのチャンクを読み込む
  const { createEditor } = await import('./heavy-editor.js');
  createEditor(document.getElementById('editor-root'));
});

splitChunks の設定もwebpack互換なので、ベンダーチャンクの分離といった定番の最適化もそのまま持ち込めます。

// rspack.config.mjs（抜粋）
export default defineConfig({
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
});