v19.2Latest

段階的な導入

React Compilerは段階的に導入することができ、コードベースの特定の部分から試すことができます。このガイドでは、既存プロジェクトでコンパイラを徐々に展開する方法を説明します。

なぜ段階的な導入なのか？

React Compilerはコードベース全体を自動的に最適化するように設計されていますが、一度にすべてを導入する必要はありません。段階的な導入により、展開プロセスを制御でき、アプリの他の部分に拡大する前に、小さな部分でコンパイラをテストできます。

小規模から始めることで、コンパイラの最適化に対する信頼を築くことができます。コンパイルされたコードでアプリが正しく動作することを確認し、パフォーマンスの改善を測定し、コードベースに固有のエッジケースを特定できます。このアプローチは、安定性が重要な本番アプリケーションで特に価値があります。

段階的な導入は、コンパイラが発見する可能性のあるReactのルール違反に対処するのにも役立ちます。コードベース全体の違反を一度に修正する代わりに、コンパイラの適用範囲を拡大しながら体系的に対処できます。これにより、移行が管理しやすくなり、バグを導入するリスクが軽減されます。

どのコードがコンパイルされるかを制御することで、コンパイラの最適化の実際の影響を測定するA/Bテストを実行することもできます。このデータは、完全導入に関する情報に基づいた意思決定を支援し、チームへの価値を示します。

React Compilerを段階的に導入する主なアプローチは3つあります：

すべてのアプローチにより、完全展開前にアプリケーションの特定の部分でコンパイラをテストできます。

Babelのoverridesオプションを使用すると、コードベースの異なる部分に異なるプラグインを適用できます。これは、ディレクトリごとにReact Compilerを徐々に導入するのに理想的です。

まず、特定のディレクトリにコンパイラを適用します：

自信がついたら、さらにディレクトリを追加します：

オーバーライドごとにコンパイラオプションを設定することもできます：

最大限の制御を得るために、compilationMode: 'annotation'を使用して、"use memo"ディレクティブで明示的にオプトインしたコンポーネントとフックのみをコンパイルできます。

このアプローチにより、個々のコンポーネントとフックを細かく制御できます。ディレクトリ全体に影響を与えずに、特定のコンポーネントでコンパイラをテストしたい場合に便利です。

コンパイルしたい関数の先頭に"use memo"を追加します：

compilationMode: 'annotation'

これにより、コンパイラの影響を評価しながら、どのコンポーネントがコンパイルされるかを正確に制御できます。

gatingオプションを使用すると、機能フラグを使ってランタイムでコンパイルを制御できます。これはA/Bテストの実行や、ユーザーセグメントに基づいてコンパイラを段階的にロールアウトする場合に便利です。

コンパイラは最適化されたコードをランタイムチェックでラップします。ゲートがtrueを返す場合、最適化バージョンが実行されます。それ以外の場合は、元のコードが実行されます。

ゲーティング関数をエクスポートするモジュールを作成します：

導入中に問題が発生した場合：