Zenn
🦀

Create React App製のビルド激重プロジェクトを Rsbuild に置きかえたら最小の手間で幸せになれた

に公開
React
Create React App
Rspack
rsbuild
tech

CRA のビルド時間に苦しんでいる人に届けたい内容の記事です。3分半が7秒になりました

背景

業務で扱っている Create React App (CRA)製のプロジェクトがいくつかあるのですが、dev サーバーの起動時間でカップラーメンが作れるぐらいに遅く、触るたびにとてつもないストレスを感じていました。

耐えがたい劣悪な作業環境だったので、飛びぬけて遅いプロジェクトを vite に置きかえるチャレンジを実施したことがあります。この試みは上手くいき、数秒で起動する環境に生まれ変わりました。

しかし CRA と Vite の互換性は低く、パスの書き換えや環境周りの設定など苦難が多い道のりでした。他のPJはまだ我慢できるから CRA のままでいいか……と思いとどまってしまうほどで、今までずっと放置してしまっていました。

ところで、Webpack 互換を Rust で実現することを目指した Rspack というバンドラーをご存じでしょうか。先日 v1 がリリースされていたようです。こちらであれば Vite よりは楽に移植できそうなので、CRAからの移植を試してみることにしました。

https://rspack.dev/blog/announcing-1-0

前提環境

  • Create React App で作成されている
  • webpack のカスタマイズはあまりしていない

手順

前知識

Rspack の関連プロジェクトに Rsbuild があります。

react-scripts のまま使っている or Webpack のプラグインを消しても大丈夫なビルド構成であれば、Rsbuild での置き換えが推奨されます。

webpack ≒ Rspack, CRA ≒ Rsbuild のイメージ。

どちらにせよ移行手順はシンプルです。詳しくは最新の公式手順に沿ってください。

Rspack

https://rspack.dev/guide/migration/cra

Rsbuild (推奨)

https://rsbuild.dev/guide/migration/cra

インストール

> pnpm add @rsbuild/core @rsbuild/plugin-react -D

変更箇所

私のやった作業

  1. package.json の script を Rsbuild にする
  2. env 設定などをいくつか rsbuild.config.ts に書く

これで終わり！import の修正など、コード側に手を入れる作業は本当に一切不要でした。

効果

Before

pnpm build: 3分30秒
pnpm dev: 2分35秒
hot reload(HMR): 2.5~3秒

After

pnpm build: 7.5秒
pnpm dev: 4秒
hot reload(HMR): 1.5~2秒

〆

とても幸せになれました。この情報が CRA に苦しんでいる人に届けば幸いです。

おまけ

rsbuild.config.ts
/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig, loadEnv } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

const { publicVars } = loadEnv({ prefixes: ['REACT_APP_'] });

export default defineConfig({
    plugins: [pluginReact()],
    html: {
        template: './public/index.html',
    },
    output: {
        distPath: {
            root: 'build',
        },
    },
    source: {
        define: {
            ...publicVars,
            'process.env': {},
        },
    },
});

Discussion