9月4日、Master.dev Blogが「React Now Rusted All The Way Out – Master.dev Blog」と題した記事を公開した。RustベースのReact Compiler(oxc実装)への移行によって得られたビルド高速化と、Babelベースのコンパイラで残っていた制限の解消について、実アプリでの計測結果を交えて紹介している。
React Compilerは、useMemo/useCallback相当のメモ化をビルド時に自動で行うコンパイラだ。2024年にReact公式として開発が進み、2025年にv1.0としてBabel経由の実装が正式リリースされた。しかし2026年8月4日、oxcチームがRust製の実装を含むnpmパッケージoxc-transform-reactの正式サポートをリリースしたことで状況が変わった。oxcは「JavaScriptツールチェーンをRustで再実装する」プロジェクトで、Oxlintなどでも知られる。oxcプロジェクトリードのBoshen氏は自身のブログで「予備ベンチマークでBabelより10倍以上速い」と述べていたが、実際に試したユーザーからはさらに大きな数字が報告されている。
17倍速:1,000ファイル超の実アプリで計測
Master.dev Blogの筆者は、Webサイトビルダー「Outlyne」(React Router製、1,036ファイル規模)のコードベースで実測した。コンパイラ単体では14.3秒→0.81秒(シングルスレッド)と約17.6倍の高速化を達成。ビルド全体では22.1秒→9.3秒と2.4倍短縮された。バンドル等コンパイラ以外の処理は変わらないため全体の改善幅はコンパイラ単体ほどではないが、CI費用の削減やフィードバックループの短縮として実際に効く数字だ。
速度より重要かもしれない:Babel版の制限解消
筆者がより強調しているのは速度ではなく、Babelベースのv1.0で残っていたJavaScript対応の制限が解消された点だ。
try/catchブロック内の条件ロジックは、v1.0リリース時に多くのユーザーにとってブロッカーになっていたパターンで、今回のPRでサポートされた。デストラクチャリングしたpropsの再代入(ネストされたクロージャ内で使うパターン)も、先週のPRで対応済みだ。さらに計算プロパティキー(clsxと組み合わせた[`items-${itemCount}`]のような書き方)もBabel版ではスキップされていたが、これも解消された。
これら3つの修正により、筆者のアプリではさらに7つの関数がコンパイラの最適化対象に加わった。現時点でもtryブロック内からのthrowと論理代入演算子(??=、&&=、||=)はサポートされていないが、Rust版を使っていれば修正が入り次第すぐ恩恵を受けられる。Babelベースのコンパイラは今後メンテナンスが縮小される方向にあり、新規プロジェクトがBabel版に留まる積極的な理由は薄くなっている。
Linterとビルドのバージョンをそろえられる実用的メリット
もう一つの見逃せない恩恵が、LinterとビルドでのReact Compilerバージョン統一だ。筆者はかつてOxlint側がoxc-transform-react v0.145.0を参照しているのに対しビルド側がv0.144.0を使っていたため、コンポーネントがビルドで最適化されないにもかかわらずlintエラーも出ないという状況に陥り、誤ったissueをoxcに報告してしまったという。Rust版に統一することで、LinterとビルドがReact Compilerの同一バージョンを参照するため、この種のズレが構造的に起きなくなる。
導入方法
@vitejs/plugin-reactを使っている場合(Vite v8以上)は、v6.1.0でexperimentalとしてネイティブサポートが入った。npm install -D oxc-transform-reactを実行後、vite.configの設定をreact({ compiler: true })の一行に集約できる。@rolldown/plugin-babelは不要になる。
React Router Framework Modeを使っている場合のように@vitejs/plugin-reactを直接使えない構成向けには、@acusti/vite-plugin-react-compilerという最小構成のViteプラグインが使える。従来3つ必要だったdev dependency(vite-plugin-babel、babel-plugin-react-compiler、@babel/preset-typescript)が1つに集約される。具体的なコード例は元記事に詳しい。
詳細はReact Now Rusted All The Way Out – Master.dev Blogを参照していただきたい。