段階的な導入

なぜ段階的な導入が推奨されるのか？

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

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

段階的な導入により、コンパイラが見つける可能性のある React のルール違反に対処することも容易になります。コードベース全体の違反を一度に修正するのではなく、コンパイラのカバレッジを拡張しながら体系的に対処できます。これにより、移行作業が管理しやすくなり、バグが混入するリスクを減らします。

コードのどの部分がコンパイルされるかをコントロールすることで、コンパイラの最適化の実際の影響を測定する A/B テストを実行することもできます。このデータは、コンパイラを全体へ適用するか否かを意思決定したり、コンパイラの価値をチームに示したりするための情報として役立ちます。

段階的な導入のアプローチ

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

1. Babel overrides - 特定のディレクトリにコンパイラを適用
2. ”use memo” によるオプトイン - 明示的にオプトインしたコンポーネントのみをコンパイル
3. ランタイムゲーティング - フィーチャーフラグでコンパイルをコントロール

どのアプローチを使っても、全体への展開前にアプリケーションの特定の部分のみでコンパイラのテストが可能です。

Babel Overrides によるディレクトリベースの導入

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

基本的な設定

特定のディレクトリにコンパイラを適用することから始めます。

// babel.config.js
module.exports = {
  plugins: [
    // Global plugins that apply to all files
  ],