Votre application React est-elle trop lente ou prend-elle trop de temps à se charger ? Si c’est le cas, vous pourriez vouloir utiliser une technique connue sous le nom de fractionnement du code. Cette technique est très efficace pour améliorer la vitesse de chargement et les performances des applications React. Mais qu’est-ce que le fractionnement de code ? Et comment se fait-il ?


Qu’est-ce que le fractionnement de code ?

Une application React typique comprend des dizaines de composants (et de code). Mais vous n’avez pas besoin de charger la plupart de ces composants lorsque vous les chargez pour la première fois. Le découpage du code consiste à diviser les différentes parties de votre application et à ne les charger qu’en cas de besoin. C’est beaucoup plus efficace que de charger l’ensemble de l’application en une seule fois.

Prenons l’exemple d’une application React qui comporte trois pages : la page d’accueil, la page « à propos » et la page « produits ». Lorsque vous êtes sur la page d’accueil, il est inutile de charger la page à propos ou la page des produits. En effet, vous n’êtes pas encore sur ces pages. L’idée du fractionnement du code est de s’assurer que vous ne chargez le code que lorsqu’il est nécessaire.

Lire  Quelles sont les technologies sans fil unificatrices et boulonnées de Logitech ?

Homme utilisant à la fois un ordinateur portable et un téléphone

Ouvrez une page web sur votre navigateur, puis ouvrez les DevTools (vous pouvez cliquer sur F12 sur votre clavier pour l’ouvrir sur Google Chrome). Ensuite, va dans l’onglet Source. Vous y trouverez tout le code téléchargé lorsque vous naviguez sur la page. Sans fractionnement du code, le navigateur télécharge tous les fichiers de votre projet lors du chargement initial de la page. Cela peut ralentir votre site web s’il contient beaucoup de fichiers.

Le fractionnement du code devient particulièrement utile lorsque votre projet devient de plus en plus volumineux. En effet, le téléchargement de l’ensemble des fichiers de l’application en une seule fois peut prendre beaucoup de temps. Le fractionnement du code sera donc très utile.

La meilleure partie du fractionnement du code est que vous pouvez retarder le chargement des composants et des fonctions. Notre guide d’introduction à ReactJS explique les composants et les fonctions en profondeur au cas où vous auriez besoin d’un rafraîchissement.

Fractionnement du code des fonctions : Utiliser l’importation dynamique

Considérons la situation suivante. Vous voulez que votre page d’accueil comporte un bouton. Lorsque vous cliquez sur le bouton, vous voulez alerter la somme de 2 et 2 (qui est 4). Vous créez donc un Home.js et définissez la vue de votre page d’accueil.

Dans ce cas, deux possibilités s’offrent à vous. Tout d’abord, vous pouvez importer le code permettant d’ajouter les chiffres en haut de la page d’accueil. Home.js . Mais voici le problème. Si vous importez la fonction en haut du fichier, le code se chargera même si vous n’avez pas cliqué sur le bouton. Une meilleure approche consisterait à charger la fonction sum() Cette fonction n’est activée que lorsque vous cliquez sur le bouton.

Pour ce faire, vous devez procéder à une importation dynamique. Cela signifie que vous allez importer le fichier sum() dans l’élément bouton. Voici le code correspondant :

 export default function Home() { 
 return ( 
   <div className="Home"> 
     <h1>HomePage</h1>
     <button onClick={() => {
       import("../sum.js").then((module) => {
         alert(module.sum(2, 2))
       })
     }}
     >
       Sum both numbers
     </button> 
  </div> 
 ); 
}

Désormais, le navigateur ne téléchargera que la fonction sum.js lorsque vous cliquez sur le bouton. Cela améliore le temps de chargement de la page d’accueil.

Composants de fractionnement du code : Utiliser React.lazy et Suspense

Vous pouvez diviser les composants dans React à l’aide de la fonction lazy() . Le meilleur endroit pour effectuer le découpage du code serait à l’intérieur de votre routeur. En effet, c’est là que vous mappez les composants aux routes dans votre application. Vous pouvez lire notre guide sur la construction d’une application à page unique avec React Router si vous avez besoin d’un rafraîchissement.

Supposons que votre application ait un composant Accueil, A propos de, et Produits composant. Lorsque vous êtes au Accueil il est inutile de charger le composant A propos de ou le composant Produits . Vous devez donc les séparer du composant Accueil route. Le code suivant montre comment y parvenir :

Tout d’abord, vous devez importer les fonctions et les composants nécessaires à partir de la base de données react et react-router-dom modules :

 import { Routes, Route, Outlet, Link } from "react-router-dom";
import { lazy, Suspense } from "react";

Ensuite, vous devez importer les composants dynamiquement à l’aide de la méthode lazy() fonction :

 const Home = lazy(() => import("./components/Home"));
const About = lazy(() => import("./components/About"));
const Products = lazy(() => import("./components/Products"));

Ensuite, définissez la mise en page (menu de navigation). Utilisez la fonction <Outlet /&gt ; pour rendre le composant qui correspond à l’itinéraire actuel (Accueil, A propos de, ou Produits ) :

 function NavWrapper() {
  return (
    <>
      <nav style={{ display: "flex", gap: "1rem" }}>
        <Link to="https://www.makeuseof.com/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/products">Products</Link>
      </nav>
      <Suspense fallback={<h1>Loading...</h1>}>
        <Outlet />
      </Suspense>
    </>
  );
}

Vous pouvez voir que nous enveloppons les composants à l’intérieur de <Suspense /&gt ;. Cela indique à React que tout ce qui se trouve à l’intérieur de <Outlet /&gt ; a le potentiel d’être chargé paresseusement, ce qui signifie qu’il peut ne pas être disponible immédiatement. C’est la raison pour laquelle l’option Suspense Le composant a une fallback . Dans notre cas, la valeur est un simple texte qui dit « Loading… ». Ainsi, pendant que chaque page est téléchargée, l’écran affichera « Loading ».

Enfin, configurez l’itinéraire :

 export default function App() {
  return (
    <Routes>
      <Route path="https://www.makeuseof.com/" element={<NavWrapper />}>
        <Route path="https://www.makeuseof.com/" element={<Home />} />
        <Route path="/products" element={<Products />} />
        <Route path="/about" element={<About />} />
      </Route>
    </Routes>
  );
}

Désormais, lorsque vous visitez la page d’accueil, le navigateur ne charge que le fichier Home.js . De la même manière, lorsque vous cliquez sur le fichier A propos de dans le menu de navigation pour visiter la page À propos, le navigateur ne charge que la page About.js . Il en va de même pour la page Produits.

Fractionnement conditionnel du code

Il arrive souvent que le contenu de votre page ne s’applique qu’à certains utilisateurs. Par exemple, sur votre page d’accueil, vous pouvez avoir une section avec des données d’administration qui sont exclusives aux utilisateurs administrateurs. Il peut s’agir d’un tableau de bord administratif qui s’affiche pour les utilisateurs administrateurs, mais pas pour les utilisateurs normaux.

Dans ce cas, vous ne voudriez pas afficher toutes ces données à chaque fois. Dans ce cas, vous pouvez utiliser la technique de division de code pour vous assurer que vous n’affichez ces informations que si cette personne est un administrateur.

Voici à quoi ressemblerait ce code :

 import { lazy, Suspense } from "react";
const AdminData = lazy(() => import("./AdminData"));

export default function Home() { 
  const [isAdmin, setIsAdmin] = useState(false)

  return ( 
   <div className="Home"> 
     <h1>HomePage</h1>
     <button onClick={() => setIsAdmin(prev => !prev)}>
       Toggle Admin
     </button> 

    <Suspense fallback={<h1>Loading...</h1>}>
      {isAdmin ? <AdminData /> : <h2> Not the Admin </h2>} 
    </Suspense>
  </div> 
 ); 
}

Maintenant, quand vous cliquez sur le bouton de basculement, isAdmin sera fixé à vrai. En conséquence, l’application affichera le message <AdminData&gt ; qui est chargé paresseusement. Mais si vous n’êtes pas un utilisateur administrateur, l’application ne sera jamais téléchargée. AdminData.js parce qu’il n’en aura pas besoin.

Le découpage conditionnel du code utilise le même concept que le rendu conditionnel dans React.

Concepts avancés de découpage du code

Les transitions sont une technique avancée que vous pouvez utiliser lorsque vous scindez du code. Les transitions useTransition() permet de faire des mises à jour non urgentes qui ne changeront pas l’interface utilisateur avant la fin de la mise à jour.

Tout d’abord, vous importez le hook :

 import {useTransition} from "react"

Ensuite, vous appelez le crochet, qui renvoie isPending et startTransition:

 const [isPending, startTransition] = useTransition()

Enfin, enveloppez le code de mise à jour de votre état à l’intérieur de startTransition():

 startTransition(() => {
  setIsAdmin((prev) => !prev)
})

Maintenant, votre interface utilisateur ne va pas afficher la valeur de repli (le texte de chargement) tant que le navigateur n’aura pas terminé la transition. Cela signifie qu’elle attendra que le navigateur ait téléchargé l’ensemble des données d’administration avant d’afficher la moindre donnée.

Autres façons d’optimiser les performances de React

Cet article a abordé le découpage du code comme une méthode pour améliorer les performances de vos applications React. Mais il existe également plusieurs autres méthodes qui peuvent vous apporter les connaissances nécessaires pour créer des applications robustes.