Guide du chargement paresseux avec React

Introduction

Lors du développement de grandes applications React, nous utilisons généralement de nombreuses images et vidéos, installons des packages/bibliothèques tiers, effectuons des appels d'API et faisons diverses autres choses. Cela augmente naturellement le temps nécessaire pour charger notre application et se traduit par une taille de bundle massive, ce qui contribue à une mauvaise expérience utilisateur. C'est là que chargement paresseux vient en place. Il nous permet de charger le contenu juste à temps, juste avant qu'il ne s'affiche dans l'application.

Nous pouvons éviter de précharger le contenu alors qu'il est toujours hors de vue et concentrer toutes les ressources sur le contenu qui est dans la vue.

Dans ce guide, nous verrons comment utiliser React.lazy() ainsi que React.Suspense pour implémenter la fonctionnalité de chargement paresseux et de fractionnement de code qui nous permet de gérer le fractionnement de code sans avoir besoin d'installer de bibliothèques supplémentaires.

Qu'est-ce que le chargement paresseux?

Lorsque nous lançons une application Web React, elle regroupe généralement l'ensemble de l'application en même temps, chargeant tout, y compris les pages entières de l'application Web, les images, le contenu et bien plus encore pour nous, ce qui peut entraîner un temps de chargement lent et des performances globales médiocres, selon la taille du contenu et la bande passante Internet à ce moment-là.

Chargement paresseux nous permet de charger des composants spécifiques uniquement lorsqu'ils sont nécessaires. En règle générale, nous effectuons également fractionnement de code en composants logiques qui peuvent également être chargés paresseusement avec le contenu.

Par exemple, si nous avons une page de tableau de bord qui affiche de nombreuses informations provenant de diverses sources lorsqu'on clique dessus, il est toujours préférable de garder ces composants et pages chargés paresseux, afin qu'ils ne se chargent que lorsque cela est nécessaire ou requis par l'utilisateur.

Remarque: Le processus consistant à diviser un gros paquet de code en plusieurs paquets pouvant être chargés dynamiquement dans le but d'éviter les problèmes de performances associés aux paquets surdimensionnés est connu sous le nom de partage de code. Ceci est accompli sans réduire la quantité de code dans notre application.

En résumé, le chargement différé nous permet de rendre des composants ou des éléments à la demande, ce qui rend notre application plus efficace et offre une meilleure expérience utilisateur.

Remarque: Demandes d'une seule page (Les thermes) sont conçus pour contenir toutes les pages et le contenu d'un seul document/page. C'est pourquoi le chargement différé est particulièrement utile lors du développement de SPA.

Comment implémenter le chargement paresseux dans React

Jusqu'à présent, nous avons vu ce qu'est le chargement différé et pourquoi il est important de l'implémenter. Voyons maintenant comment nous pouvons l'implémenter dans nos applications React, en utilisant deux fonctionnalités React qui facilitent l'implémentation du fractionnement de code et du chargement paresseux - Réagir.lazy() ainsi que Réagir.Suspense.

React.lazy() est une fonction qui nous permet de rendre importations dynamiques de la même manière que les composants réguliers. L'utilisation d'importations dynamiques parallèlement à la React.lazy() nous permettra d'importer un composant juste avant qu'il ne s'affiche sur un écran. Une chose importante à noter est que React.lazy() accepte une fonction comme argument - cette fonction doit appeler la dynamique import() dans son corps.

React.Suspense nous permet de spécifier le repli soutenir qui prend un contenu d'espace réservé qui serait utilisé comme un indicateur de chargement tandis que tous les composants paresseux sont chargés.

Commençons par examiner comment nous pouvons implémenter le chargement paresseux dans nos composants importés, puis comment nous pouvons l'implémenter dans nos routes afin que les pages ne soient pas chargées tant que nous n'y avons pas navigué.

Pour commencer

Supposons que nous ayons notre application React et que nous importions le About composant dans le Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Nous pouvons maintenant implémenter le chargement paresseux en utilisant React.lazy():

import React from 'react';


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

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Remarque: React.lazy() utilisé de cette façon renvoie un Promise objet. Cette promesse se résout en un module contenant un composant React que nous voulons charger paresseux dans son default exportation.

Nous avons implémenté le chargement différé en utilisant React.lazy(), mais le code ci-dessus lancera toujours un erreur dire que notre “React component suspended while rendering, but no fallback UI was specified”. Cela peut être résolu en enveloppant le composant avec React.Suspense's fallbackz et attacher les accessoires de repli comme nous l'avons expliqué précédemment :

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Remarque: L'accessoire de secours peut prendre un composant à afficher avant le chargement du contenu d'origine.

De plus, nous pouvons décider de déstructurer l'import React pour rendre le code plus propre et plus lisible :

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Jusqu'à présent, nous avons vu comment implémenter le chargement différé dans nos composants importés. Voyons maintenant comment l'implémenter dans nos routes lors du routage avec le routeur React.

Comment implémenter le chargement paresseux avec React Router

Le routage paresseux est en fait une bonne pratique pour les routes qui ont beaucoup de contenu et peuvent ralentir le temps de chargement de votre application. L'implémentation du chargement paresseux pour les routes React est presque identique à ce que nous avons fait précédemment lors du chargement paresseux de composants importés dynamiquement.

Le chargement paresseux des routes React fait référence à l'importation dynamique d'un composant uniquement lorsque cela est nécessaire. Par exemple, disons que nous avons deux routes dans notre application et deux composants représentant ces routes. Si nous implémentons le routage mentionné de la manière suivante, chaque composant ne sera chargé que lorsque nous naviguerons vers la route correspondante :

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Conclusion

Dans ce guide, nous avons appris ce que sont le chargement paresseux et le fractionnement de code, comment les implémenter et que le meilleur endroit pour implémenter le chargement paresseux est avec les routes. Cela évite de rendre la page entière en une seule fois, ce qui peut entraîner un temps de chargement plus lent lorsqu'il s'agit de pages avec de grandes quantités de contenu.