Adoption progressive

React Compiler peut être adopté progressivement, vous permettant de l'essayer d'abord sur des parties spécifiques de votre base de code. Ce guide vous montre comment déployer progressivement le compilateur dans des projets existants.

Pourquoi une adoption progressive ?

React Compiler est conçu pour optimiser automatiquement toute votre base de code, mais vous n'êtes pas obligé de l'adopter d'un seul coup. L'adoption progressive vous donne le contrôle sur le processus de déploiement, vous permettant de tester le compilateur sur de petites parties de votre application avant de l'étendre au reste.

Commencer petit vous aide à prendre confiance dans les optimisations du compilateur. Vous pouvez vérifier que votre application se comporte correctement avec le code compilé, mesurer les améliorations de performances et identifier les cas particuliers spécifiques à votre base de code. Cette approche est particulièrement précieuse pour les applications de production où la stabilité est critique.

L'adoption progressive facilite également la résolution des violations des Règles de React que le compilateur pourrait trouver. Au lieu de corriger les violations dans toute votre base de code en une seule fois, vous pouvez les traiter systématiquement au fur et à mesure que vous étendez la couverture du compilateur. Cela rend la migration gérable et réduit le risque d'introduire des bugs.

En contrôlant quelles parties de votre code sont compilées, vous pouvez également exécuter des tests A/B pour mesurer l'impact réel des optimisations du compilateur. Ces données vous aident à prendre des décisions éclairées concernant l'adoption complète et démontrent la valeur pour votre équipe.

Approches pour l'adoption progressive

Il existe trois approches principales pour adopter React Compiler progressivement :

1. Surcharges Babel- Appliquer le compilateur à des répertoires spécifiques
2. Adhésion volontaire avec "use memo"- Ne compiler que les composants qui y adhèrent explicitement
3. Gating en runtime- Contrôler la compilation avec des drapeaux de fonctionnalités

Toutes ces approches vous permettent de tester le compilateur sur des parties spécifiques de votre application avant un déploiement complet.

Adoption basée sur les répertoires avec les surcharges Babel

L'optionoverridesde Babel vous permet d'appliquer différents plugins à différentes parties de votre base de code. C'est idéal pour adopter progressivement React Compiler répertoire par répertoire.

Configuration de base

Commencez par appliquer le compilateur à un répertoire spécifique :

Étendre la couverture

Au fur et à mesure que vous gagnez en confiance, ajoutez d'autres répertoires :

Avec les options du compilateur

Vous pouvez également configurer les options du compilateur par surcharge :

Mode d'adhésion volontaire avec "use memo"

Pour un contrôle maximal, vous pouvez utilisercompilationMode: 'annotation'pour ne compiler que les composants et hooks qui y adhèrent explicitement avec la directive"use memo".

Configuration du mode annotation

Utilisation de la directive

Ajoutez"use memo"au début des fonctions que vous souhaitez compiler :

AveccompilationMode: 'annotation', vous devez :

• Ajouter"use memo"à chaque composant que vous souhaitez optimiser
• Ajouter"use memo"à chaque hook personnalisé
• Penser à l'ajouter aux nouveaux composants

Cela vous donne un contrôle précis sur les composants compilés pendant que vous évaluez l'impact du compilateur.

Indicateurs de fonctionnalités en temps d'exécution avec Gating

L'optiongatingvous permet de contrôler la compilation au moment de l'exécution à l'aide d'indicateurs de fonctionnalités. C'est utile pour exécuter des tests A/B ou déployer progressivement le compilateur en fonction des segments d'utilisateurs.

Fonctionnement de Gating

Le compilateur enveloppe le code optimisé dans une vérification à l'exécution. Si la porte renvoietrue, la version optimisée s'exécute. Sinon, le code original s'exécute.

Configuration de Gating

Implémentation de l'indicateur de fonctionnalité

Créez un module qui exporte votre fonction de gating :

Dépannage de l'adoption

Si vous rencontrez des problèmes lors de l'adoption :

1. Utilisez"use no memo"pour exclure temporairement les composants problématiques
2. Consultez leguide de débogagepour les problèmes courants
3. Corrigez les violations des Règles de React identifiées par le plugin ESLint
4. Envisagez d'utilisercompilationMode: 'annotation'pour une adoption plus progressive

Prochaines étapes

• Lisez leguide de configurationpour plus d'options
• Découvrez lestechniques de débogage
• Consultez laréférence APIpour toutes les options du compilateur