Webpackのビルド時間を1/10に！Rust製バンドラー「Rspack」移行ガイド【2025年版】

ビルド待ち時間は「休憩時間」ではありません

「ちょっと修正して保存...ビルド完了まで30秒待ち」 この積み重ねが、開発者の生産性とモチベーションを削いでいます。

Viteの登場で開発サーバーの起動は速くなりましたが、本番ビルドの速度や、Webpackのエコシステム（Loader/Plugin）への依存という課題は残っていました。

そこで登場したのが、ByteDanceが開発したRust製バンドラー Rspack です。 2025年現在、Rspackはv1.0を超え、Webpackからの移行先として最も有力な選択肢となっています。

Rspackの強み

1. Webpack互換: 設定ファイルの構造やLoader/PluginのAPIがWebpackとほぼ同じです。
2. 爆速: Rust製のため、Webpackと比較して5〜10倍高速です。
3. エコシステム: 既存のWebpackプラグインの多くがそのまま、あるいは少しの修正で動作します。

実践：Webpackプロジェクトからの移行

React + Webpackのプロジェクトを想定して、Rspackへ移行してみましょう。

1. インストール

Webpack関連のパッケージを削除し、Rspackをインストールします。

# Webpackの削除
npm uninstall webpack webpack-cli webpack-dev-server

# Rspackのインストール
npm install --save-dev @rspack/core @rspack/cli

Reactを使用している場合は、専用プラグインも入れます。

npm install --save-dev @rspack/plugin-react-refresh

2. 設定ファイルの書き換え

webpack.config.js を rspack.config.js にリネームし、内容を修正します。 驚くほど変更点は少ないはずです。

rspack.config.js

const path = require('path');
const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          // babel-loaderの代わりにbuiltin:swc-loaderを使用（推奨）
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
            },
          },
        },
        type: 'javascript/auto',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'], // Webpackと同じLoaderが使える
        type: 'javascript/auto',
      },
    ],
  },
  plugins: [
    // React Fast Refresh
    !process.env.NODE_ENV === 'production' && new ReactRefreshPlugin(),
  ].filter(Boolean),
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

3. スクリプトの更新

package.json

{
  "scripts": {
    "start": "rspack serve",
    "build": "rspack build"
  }
}

4. 実行

npm start

これだけで、開発サーバーが爆速で立ち上がるはずです。

移行のポイント：Loaderの置き換え

RspackはWebpackのLoaderをサポートしていますが、パフォーマンスを最大化するには、Rust実装された組み込み機能（Built-in features）を使うのがコツです。

• babel-loader -> builtin:swc-loader
• file-loader / url-loader -> Asset Modules (type: 'asset')
• html-webpack-plugin -> @rspack/plugin-html (または builtin:html-rspack-plugin)
• terser-webpack-plugin -> 標準でMinification機能が組み込まれています

まとめ

Rspackへの移行は、Viteへの移行（ES Modulesへの書き換えが必要）に比べて、既存のWebpackプロジェクトの構造を維持できるため、ハードルが非常に低いです。

「Webpackの設定ファイルが複雑すぎて触りたくない...」 そんなプロジェクトこそ、Rspackへの移行で劇的な改善が見込めます。

2025年は、ビルド待ち時間をゼロにして、コーディングに集中しましょう。