Soyez paresseux avec Réagir

À mesure que votre application React grandit, la taille de votre paquet augmente également. Fractionner votre offre groupée peut vous aider à charger paresseux uniquement les éléments dont l'utilisateur a absolument besoin. Cela peut réduire le code nécessaire au chargement initial, retardant ainsi le chargement des composants ou des modules jusqu'à ce que l'utilisateur le demande.

React a ajouté de nombreuses fonctionnalités étonnantes au cours de la dernière année qui facilitent l'utilisation des composants dans React. En octobre 2018, React a publié sa fonctionnalité de chargement paresseux dans React 16.6.

Je savais que React disposait d'un système de routeur basé sur des composants assez décent que je pouvais utiliser et j'avais appris l'existence de cette nouvelle fonction appelée Suspense. Dans Suspense, je pourrais utiliser une fonction appelée paresseuse qui me permettrait de réaliser les capacités de chargement paresseux que je cherchais. Mais j'étais plus étonné de voir à quel point cela semblait être plus simple. Et cela a été mon expérience la plupart du temps dans React. Je trouve que si React a un avis sur quelque chose et qu'il vous aide à le faire, cela va être assez simple et facile.

J'ai commencé mon apprentissage dans le blog de React par un article mettant en avant la sortie de cette fonctionnalité: . ] Réagissez v16.6.0: lazy, mémo et contextType . Ce document contient des liens vers de nombreuses autres ressources documentaires pour vous aider à comprendre le fractionnement du code et à comprendre en quoi il fait partie des fonctionnalités React Suspense et Lazy.

Quelques vidéos à ne pas manquer sur le sujet sont Jared Palmer et Réaction Conf de Dan Abramov 2018 parle en suspens ainsi que Discours "React Suspense" d'Andrew Clark au ZEIT Day à San Francisco.

Qu'est-ce que cela signifie pour les développeurs

Les capacités de rendu asynchrones ajoutées nous permettent d'optimiser le chargement initial des pages, d'augmenter les performances de notre application et d'aider à fournir une meilleure expérience utilisateur en chargeant des morceaux de notre application en différé. 19659003] Nous souhaitons différer des ressources non critiques et les charger à la demande, au besoin, à l'aide de la division de code. Cela nous aidera à gérer le chargement des images, des données ou de tout ce que nous voulons regrouper séparément. Nous pouvons être vraiment créatifs avec ces fonctionnalités.

Une bonne pratique pour la création de votre application Web consiste à séparer ces ressources des ressources critiques et non critiques. Nous voulons d'abord charger les éléments critiques, ainsi que toutes les données nécessaires pour le chargement initial de la page. Ensuite, des ressources moins critiques peuvent être chargées lorsque nous passons à une nouvelle page, survolons une image, peu importe.

Approche de base de la scission du code

Le meilleur moyen d'utiliser la scission du code dans votre application consiste à utiliser la dynamique syntaxe d'importation. Create React App et Next.js prennent en charge cette syntaxe dans leurs dernières versions. Voici un exemple de cela:

 import ("./ math"). Then (math => {
  math.sum (1, 2, 3);
});

Fraction de code avec Lazy dans React

Dans React, nous avons une fonction à partir de React 16.6 que nous pouvons utiliser pour nous permettre de rendre une importation dynamique en tant que composant. Cela facilite le fractionnement et le chargement des composants React. Nous pouvons faire cela au lieu d'importer un composant à partir d'un autre fichier et de le restituer immédiatement.

Disons que nous avons un ArtistComponent qui contient une liste d'événements que nous pouvons charger à partir d'un composant Events et nous voulons uniquement charger le composant Events si le ArtistComponent est chargé. Nous pourrions faire ce qui suit:

 const Events = React.lazy (() => import ('./ Events'));

fonction ArtistComponent () {
  revenir (
    

      
    
  );
} 

Avec React.lazy, nous réalisons le chargement automatique d'un paquet contenant le composant Events lorsque notre ArtistComponent s'affiche. Mais que se passe-t-il lorsque le module contenant le composant Events n'est pas encore chargé au moment du rendu par ArtistComponent ? Si nous intégrons le composant Suspense dans le mix, nous pouvons fournir une solution de repli à afficher jusqu'à ce que le composant Events soit chargé.

Notez ci-dessous que le seul changement permettant de fournir un indicateur de chargement est l'ajout du composant Suspense et d'un accessoire appelé fallback dans lequel nous passons un chargement de base div .

 const Events = React.lazy (() => import ('./ Events'));

fonction ArtistComponent () {
  revenir (
    

      <Suspense fallback = {
 Chargement ... 
}>
        
      
    
  );
}

React.lazy () prend une fonction qui renvoie une promesse qui est le résultat d'une instruction import.

Et si je veux charger plus d'un composant en même temps? Bien, nous pouvons envelopper de nombreux composants chargés paresseux dans le composant Suspense et tout fonctionnera exactement de la même manière:

 const Events = React.lazy (() => import ('./ Events'));
const Events = React.lazy (() => import ('./ Galerie'));

fonction ArtistComponent () {
  revenir (
    

      <Suspense fallback = {
 Chargement ... 
}>
        
        
      
    
  );
}

Tout cela offre une meilleure expérience utilisateur. Encore une fois, il n’ya rien de nouveau que nous ne pouvions pas faire auparavant dans React. Cependant, auparavant, vous deviez importer d'autres dépendances et bibliothèques pour le faire, et une bibliothèque comme pourrait être utilisée. Mais maintenant, avec Suspense et Lazy, nous pouvons le faire dans le noyau de React sans ajouter de dépendances supplémentaires.

Nous devrions également examiner un autre exemple de la façon de procéder avec React Router.

 importer {BrowserRouter en tant que routeur, route, commutateur} depuis 'react-router-dom';
importer Réagir, {Suspense, paresseux} de 'réagir';

const Events = lazy (() => import ('./ routes / Events'));
const Gallery = lazy (() => import ('./ routes / Gallery'));

const App = () => (
  
    <Suspense fallback = {
 Chargement ... 
}>
      
        
        
      
    
  
);

Une application de démonstration simple

Maintenant que nous avons une idée assez basique de la façon d'utiliser Suspense en parcourant les exemples de code canonique ci-dessus, créons une application simple et efficace dans StackBlitz. Nous avons juste besoin de montrer des choses très basiques.

Nous aurons d’abord besoin d’une navigation et d’un routage pour simuler une application ayant une page d’accueil qui se charge immédiatement, puis une page supplémentaire chargée à la demande de l’utilisateur menant effectivement à la page. L'idée est de ne pas charger la deuxième page tant que l'utilisateur n'a pas cliqué sur le lien de navigation correspondant.

La démonstration comporte une page info.js qui fournira des informations de base à nos utilisateurs lors de le chargement du site initialement. Nous n'avons configuré aucun chargement dynamique sur le fichier info.js et nous avons défini son itinéraire comme une barre oblique.

Nous avons ensuite une page appelée Repos . Cette page appelle une API et génère une liste des dépôts JavaScript les plus répandus auprès de GitHub. Mais cette page pourrait être n'importe quoi. On clique parfois sur cette deuxième page et pour cette raison, nous ne voulons pas la charger avec impatience pour chaque utilisateur. Jetons un coup d'oeil à ce que cela pourrait ressembler. Nous avons d’abord l’importation dynamique:

 const Repos = lazy (() => import ('./ components / Repo'));

Nous avons ensuite notre JSX utilisant toutes les astuces que nous avons apprises dans les exemples de code ci-dessus:

 
  <>
    

      
 Info 
      
 Repos 
    
    

     <Repli en attente = {
 Chargement en cours ... 
}>
      
      
    
  

Vous pouvez voir tout cela en action dans la démonstration suivante de StackBlitz:

En fait, j'ai commenté l'importation dynamique normale que vous utiliseriez et je l'ai enveloppée d'une promesse. Je retourne l'importation dynamique, mais je souhaite spécifier un délai avant le chargement de ce composant afin de simuler un problème de chargement réel qui entraînerait l'utilisation du repli en mode Suspense.

 // const Repos = lazy (() => import ('./ components / Repos'));
const Repos = lazy (() => nouvelle promesse (resolution => {
  setTimeout (() => resolvez (import ('./ components / Repos')), 1500);
})); 

Nous ne faisons que gratter la surface ici, mais nous faisons les choses beaucoup plus facilement que si nous devions gérer beaucoup de problèmes que React prend soin de nous dans les coulisses avec des limites d'erreur et du chargement . Il y a encore beaucoup à apprendre sur l'utilisation des nouvelles fonctionnalités de React en Suspense, comme par exemple, comment créer une meilleure expérience UX, mais j'espère que ce tutoriel simple vous donnera une bonne idée de la façon de démarrer facilement et de plonger vos orteils en utilisant chargement paresseux dans React. Pour plus d'informations sur la fonction Lazy de Suspense et React, visitez la documentation de ReactJS.org et regardez toutes les bonnes vidéos que j'ai liées depuis ci-dessus!

Merci de votre lecture, j'espère que vous apprécierez chacune de nos vidéos. Les articles de React Learning Series et pendant que vous êtes ici et que vous en apprenez plus sur les composants, pourquoi ne pas vous arrêter sur la page de KendoReact et découvrir nos démonstrations en direct de StackBlitz pour nos composants conçus à partir de zéro pour React!