Implémentation de chargement paresseux dans Réagir Native pour les gains de performance

Comprendre la charge paresseuse dans Réagir Native

React Native est devenu un cadre de référence pour le développement mobile multiplateforme, permettant aux développeurs de construire des applications de niveau natif avec JavaScript et React. Comme l'échelle des applications, des goulets d'étranglement de performance apparaissent souvent – surtout pendant la charge initiale. L'une des stratégies les plus efficaces pour atténuer ces problèmes est chargement paresseux. Cette technique reporte le chargement des composants, des écrans et des actifs jusqu'à ce qu'ils soient réellement nécessaires, réduisant le temps de démarrage de l'application et l'empreinte mémoire.

Qu'est-ce que Lazy Loading?

Le chargement paresseux est un modèle de conception qui reporte l'initialisation d'un objet, d'un composant ou d'une ressource jusqu'au point où il est requis. Dans le contexte de React Native, cela signifie qu'un écran ou un composant n'est pas chargé et rendu jusqu'à ce que l'utilisateur n'y navigue ou que sa visibilité devienne imminente.

Dans React Native, le chargement paresseux est généralement implémenté par des importations dynamiques en utilisant et , ou par des solutions spécifiques à la bibliothèque comme Navigation paresseuse[ pour le chargement paresseux au niveau de l'écran.

Avantages de la charge paresseuse dans Réaction Native

Adopter un chargement paresseux permet d'améliorer les performances de manière très diversifiée :

  1. La taille du paquet initial – Le fractionnement du code permet de briser le paquet JavaScript en petits morceaux chargés sur demande. Ceci est essentiel car les applications React Native expédient un seul paquet JavaScript qui doit être analysé et exécuté au lancement.
  2. Faire un saut vers l'interactif (TTI)[ – L'application devient utilisable plus tôt parce que les calculs lourds et les importations de grande bibliothèque sont différés.
  3. Une meilleure durée de vie de la batterie – Les ressources de Idle ne sont pas chargées, réduisant l'utilisation du processeur et conservant la batterie.
  4. Une maintenance plus facile – Le chargement paresseux favorise le code modulaire, facilitant ainsi la navigation et les essais de la base de codes.

Bien que ces avantages soient universels, le chargement paresseux est particulièrement précieux pour les applications avec de nombreux écrans, des graphiques complexes, des supports riches ou des SDK tiers.

Mise en œuvre de chargement paresseux avec React.lazy et Suspense

React Native supporte et depuis la version 0.62. Cependant, il y a des nuances par rapport à React pour le web.

Configuration de base

Tout d'abord, assurez-vous d'utiliser une version compatible React Native (>=0.62) et que votre packeur (Metro) est configuré pour supporter les importations dynamiques. Metro prend en charge les importations dynamiques hors-de-la-boîte depuis la version 0.59.

Étape 1 – Charger un composant paresseux

Créer un composant lourd, par exemple, un graphique complexe ou une grande liste, et l'importer en utilisant :

Étape 2 – Envelopper avec suspense

Fournir une UI de recul pendant le chargement du composant :

Importante mise en garde pour les autochtones réactants

Sur le web, fonctionne parfaitement avec React.lazy. Dans React Native, est disponible mais tous les types de composants ne fonctionnent pas parfaitement en son sein, surtout les composants de classe hérités ou les composants qui comptent sur pour les effets secondaires. Toujours tester vos composants chargés paresseux sur des appareils réels.

Techniques avancées de chargement par lassées

Chargement par amortissement de niveau d'écran avec la navigation de réaction

Le cas d'utilisation le plus courant pour le chargement paresseux dans les applications mobiles est le chargement d'écran différé. La React Navigation, la bibliothèque de navigation de facto, supporte ce modèle hors de la boîte via son prop et dynamique .

Exemple avec la navigation de réaction 6:

Vous pouvez encore optimiser en utilisant prefetching: quand un utilisateur survole un onglet ou navigue vers un écran, vous pouvez commencer à charger l'écran suivant à l'avance en utilisant ou des appels manuels .

Chargement des images paresseux

Les images sont souvent les actifs les plus lourds dans une application mobile. Le chargement paresseux signifie le report de leur téléchargement jusqu'à ce qu'elles soient près du port de vue. Vous pouvez y parvenir en utilisant des bibliothèques comme [exposition, qui supportent le chargement paresseux et le cache-cache hors de la boîte. Pour une solution personnalisée, utilisez ]]]]][F][FLT

Exemple avec FlatList à paresseux chargez les lignes visibles seulement:

Cette approche permet de garantir que seuls les éléments de la fenêtre visible sont rendus, tandis que d'autres éléments sont virtualisés.

Séparer le code avec les écrans de navigation React.lazy et React

Pour les applications de grande taille, vous pouvez également diviser le paquet JavaScript par écran en utilisant React.lazy en combinaison avec la fonction React Navigation , de React Navigation v5. Cependant, notez que React Navigation v6 utilise le composant directement, afin que vous puissiez l'envelopper avec paresseux comme indiqué ci-dessus.

Meilleures pratiques pour le chargement paresseux dans Réact Native

  • Identifiez ce que vous devez charger paresseux – Profilez votre application pour trouver les composants les plus lourds.
  • Fournir des replis significatifs[ – Utilisez des écrans squelettes, des effets de brillance ou des indicateurs d'activité pour que l'utilisateur sache que quelque chose se passe.
  • Combinez avec le cache – Une fois qu'un composant est chargé, envisagez de le garder en mémoire en utilisant la gestion de l'état (p. ex. Redux, Recoil) ou pour éviter le re-montage.
  • Éviter les composants triviaux paresseux de chargement[ – Le surcoût de l'importation dynamique et du suspense peut l'emporter sur les avantages pour les composants très petits (p. ex., un seul .
  • Test sur les appareils de faible puissance – Les gains de performance sont les plus visibles sur les appareils avec RAM limitée et les processeurs plus lents. Emuler ces conditions.
  • Utiliser Metro=2 nécessite – Pour les projets plus anciens qui ne peuvent pas utiliser les importations dynamiques, Metro supporte avec dans la configuration Metro pour reporter le chargement des modules.

Pièges courants et comment les éviter

1. Chargement sur-lassaire

Le chargement paresseux de chaque composant peut mener à une expérience utilisateur nerveuse avec trop de spinners de chargement.

2. Chargement paresseux pendant les transitions

Si vous chargez paresseux un écran auquel l'utilisateur navigue via une transition de pile ou d'onglet, l'état de chargement peut causer un retard de jarring. Considérez pré-fetking lorsque l'écran précédent est monté ou lorsque l'utilisateur survole un bouton.

3. Erreurs de non-traitement

Les importations dynamiques peuvent échouer en raison de problèmes de réseau ou de corruption de paquets. Utilisez pour attraper des erreurs dans le retour en suspens:

4. Comportement incompatible entre les plateformes

iOS et Android peuvent gérer différemment. Toujours tester sur les deux plateformes.

Mesure et surveillance du rendement

Avant de déployer le chargement paresseux, établir des mesures de base en utilisant des outils comme React Native Performance Monitor[ (disponibles via le menu développeur), Flipper, ou React DevTools.

  • Temps de rendu initial (TTIR)
  • Temps d'interactivité (TTI)
  • Utilisation de la mémoire avant et après le chargement paresseux
  • Taille du bloc par tranche

Dans de nombreuses applications Réaction Native (p. ex., Shopify=s app[), le chargement paresseux a réduit le temps de démarrage de plus de 40%.

Ressources externes et lectures complémentaires

Conclusion

Le chargement paresseux n'est pas une balle d'argent, mais lorsqu'il est appliqué correctement, il est l'un des outils les plus puissants d'une boîte à outils de performance React Native. En reportant le chargement de composants, d'images et d'écrans non essentiels, vous pouvez réduire considérablement les temps de chargement initial, réduire la pression de mémoire et fournir une expérience soyeuse et looth à vos utilisateurs. Commencez par les plus gros contrevenants de votre application – probablement des écrans à éclaboussures, des tableaux complexes ou rarement visités – et étendez progressivement le chargement paresseux à d'autres parties.