Zenn
🦀

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

2024/10/17に公開
React
Create React App
Rspack
rsbuild
tech

CRA のビルド時間に苦しんでいる人に届けたい内容の記事です。

背景

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

耐えがたい劣悪な作業環境だったので、特に遅いプロジェクト（計測したら本当に3分超ありました）を vite に置きかえるチャレンジを実施したことがあります。この試みは上手くいき、数秒で起動する環境に生まれ変わらせることが出来ました。

しかし CRA と Vite の互換性は低く、パスの書き換えや環境周りの設定など苦難の道のりでした。かかった労力はすさまじく、我慢できる程度の遅さで済んでいるプロジェクトは 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

変更箇所

公式手順に沿って、package.json の script を Rsbuild にする

手順に沿って env 設定などをいくつか rsbuild.config.ts に書く

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

効果

Before

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

After

pnpm build: 7.5秒
pnpm dev: 4秒
hot reload: 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