Code Splitting & performance d’une application React

Le Code Splitting est une technique utilisée pour diviser le code d’une application en plusieurs morceaux, appelés « chunks », qui peuvent être chargés à la demande.

Cette méthode est particulièrement utile pour les applications React volumineuses et complexes, car elle permet de réduire le temps de chargement initial et d’améliorer les performances globales de l’application.

Dans cet article, nous allons expliquer en détail comment implémenter le Code Splitting dans une application React, en utilisant des exemples d’architecture et de code.

A. Implémenter le Code Splitting sur les composants

Pour commencer, nous allons implémenter le Code Splitting sur deux composants : Composant1 et Composant2. Nous utiliserons la fonction React.lazy() pour charger ces composants à la demande.

Étape 1 : Installer les dépendances

Assurez-vous d’avoir installé les dépendances requises pour votre projet React. Si ce n’est pas déjà fait, installez React et ReactDOM avec la commande suivante :

npm install react react-dom

Étape 2 : Utiliser React.lazy() pour charger les composants

Dans votre fichier de composant principal (par exemple, App.js), importez React et utilisez la fonction React.lazy() pour charger Composant1 et Composant2 à la demande :

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

Étape 3 : Utiliser Suspense pour afficher un contenu de repli pendant le chargement

Enveloppez vos composants chargés avec React.lazy() dans un composant Suspense. Ce dernier permet d’afficher un contenu de repli (comme un spinner de chargement) pendant que le composant est en train d’être chargé :

function App() {
  return (
    <div>
      <Suspense fallback={<div>Chargement de Composant1...</div>}>
        <Composant1 />
      </Suspense>
      <Suspense fallback={<div>Chargement de Composant2...</div>}>
        <Composant2 />
      </Suspense>
    </div>
  );
}

B. Implémenter le Code Splitting sur les pages

Maintenant que nous avons implémenté le Code Splitting sur les composants, passons à l’implémentation sur les pages. Dans notre exemple, nous avons deux pages : Page1 et Page2.

Étape 1 : Utiliser React Router

Installez react-router-dom en utilisant la commande suivante :

npm install react-router-dom

Importez les composants requis et créez un routeur pour vos pages :

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const Page1 = lazy(() => import("./pages/Page1"));
const Page2 = lazy(() => import("./pages/Page2"));

function App() {
  return (
    <Router>
      <div>
        <Suspense fallback={<div>Chargement de la page...</div>}>
          <Switch>
            <Route exact path="/" component={Page1} />
            <Route path="/page2" component={Page2} />
          </Switch>
        </Suspense>
      </div>
    </Router>
  );
}

Étape 2 : Créer des liens pour naviguer entre les pages

Ajoutez des liens pour permettre la navigation entre Page1 et Page2 en utilisant le composant Link de react-router-dom :

import { Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Page 1</Link>
            </li>
            <li>
              <Link to="/page2">Page 2</Link>
            </li>
          </ul>
        </nav>

        <Suspense fallback={<div>Chargement de la page...</div>}>
          <Switch>
            <Route exact path="/" component={Page1} />
            <Route path="/page2" component={Page2} />
          </Switch>
        </Suspense>
      </div>
    </Router>
  );
}

Avec ces modifications, votre application React implémente maintenant le Code Splitting sur les composants et les pages. Les composants et les pages ne seront chargés qu’à la demande, ce qui améliore les performances de l’application et réduit le temps de chargement initial.

Conclusion

Le Code Splitting est une technique puissante pour améliorer les performances des applications React en réduisant le temps de chargement initial. Dans cet article, nous avons expliqué comment implémenter le Code Splitting sur les composants et les pages en utilisant React.lazy() et Suspense. N’oubliez pas de toujours tester et optimiser vos applications pour offrir la meilleure expérience utilisateur possible.