Code splitting (Découpage du code)

Accélérer le chargement initial : Le défi du bundle unique

Lorsque vous construisez une application React avec des outils comme Create React App (CRA), Vite, ou Webpack, le processus de build regroupe généralement tout votre code JavaScript (le code de React, des bibliothèques tierces, et votre propre code applicatif) en un seul (ou quelques) gros fichiers appelés "bundles". Le navigateur doit télécharger, parser et exécuter ce(s) bundle(s) avant que l'utilisateur puisse voir et interagir avec votre application.

Au fur et à mesure que votre application grandit et que vous ajoutez des fonctionnalités et des dépendances, la taille de ce bundle principal peut augmenter considérablement. Un gros bundle initial signifie un temps de chargement plus long pour l'utilisateur, en particulier sur des connexions réseau lentes ou des appareils moins puissants. Cela peut avoir un impact négatif sur l'expérience utilisateur et sur des métriques importantes comme le Time to Interactive (TTI).

Pour résoudre ce problème, les bundlers modernes supportent une technique appelée code splitting (ou découpage du code). Au lieu de tout mettre dans un seul fichier, le code splitting permet de diviser votre bundle en plusieurs petits morceaux ("chunks") qui peuvent être chargés à la demande (lazy loading) ou en parallèle.

React.lazy et Suspense : Les outils intégrés pour le code splitting

React fournit deux fonctionnalités principales, conçues pour fonctionner ensemble, afin d'implémenter facilement le code splitting au niveau des composants :

• React.lazy() : Une fonction qui vous permet de rendre un composant importé dynamiquement (via la syntaxe `import()`) comme s'il s'agissait d'un composant importé normalement. React chargera le bundle contenant ce composant uniquement lorsque celui-ci sera sur le point d'être rendu pour la première fois.
• React.Suspense : Un composant qui vous permet de spécifier un indicateur de chargement (un "fallback" UI, comme un spinner ou un squelette) à afficher pendant que le code du composant chargé avec `React.lazy` est en cours de téléchargement et d'évaluation par le navigateur.

L'idée est d'identifier les parties de votre application qui ne sont pas immédiatement nécessaires au premier chargement (par exemple, des routes spécifiques, des modales complexes, des sections visibles uniquement après une action utilisateur) et de les charger paresseusement en utilisant `React.lazy`.

Mise en oeuvre du code splitting au niveau des routes

L'endroit le plus courant et le plus efficace pour appliquer le code splitting est au niveau des routes de votre application. Chaque page ou section principale peut être chargée paresseusement, de sorte que l'utilisateur ne télécharge que le code nécessaire à la page qu'il consulte initialement.

Voici comment modifier une configuration de route classique pour utiliser `React.lazy` et `Suspense` :

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

// Importation dynamique des composants de page avec React.lazy
// L'import() retourne une Promesse qui se résout avec le module contenant l'export default
const Accueil = lazy(() => import('./pages/Accueil'));
const APropos = lazy(() => import('./pages/APropos'));
const TableauDeBord = lazy(() => import('./pages/TableauDeBord'));

// Un composant simple pour le fallback de Suspense
function IndicateurChargement() {
  return 
Chargement de la page...
;
}

function App() {
  return (
    
      
      
      {/* Suspense enveloppe les routes dont les composants sont chargés paresseusement */}
      }>
        
          } />
          } />
          } />
        
      
    
  );
}

export default App;

Points clés :

1. Au lieu d'importer directement les composants (`import Accueil from './pages/Accueil'`), on utilise `React.lazy(() => import('./pages/Accueil'))`.
2. Le composant `Suspense` est placé au-dessus (ou autour) des `Routes` (ou de toute partie de l'UI qui pourrait rendre un composant lazy).
3. La prop `fallback` de `Suspense` reçoit le JSX à afficher pendant que le code du composant lazy est en cours de chargement. Cela peut être un simple message, un spinner, un composant squelette, etc.

Avec cette configuration, lorsque l'utilisateur visite `/` pour la première fois, seul le code commun et celui de `Accueil` sont chargés. S'il clique ensuite sur le lien "A Propos", React va déclencher le téléchargement du "chunk" contenant le code de `APropos`. Pendant ce court instant, l'`IndicateurChargement` sera affiché, puis une fois le code chargé, `APropos` sera rendu. Le bundler (Webpack, Vite...) s'occupe automatiquement de créer ces différents chunks lors du build.

Autres cas d'usage et bonnes pratiques

Le code splitting ne se limite pas aux routes. Vous pouvez l'appliquer à n'importe quel composant qui n'est pas nécessaire immédiatement :

• Modales ou Popups : Chargez le code de la modale uniquement lorsqu'elle est sur le point d'être ouverte.
• Composants lourds : Si un composant utilise une bibliothèque externe volumineuse ou effectue un rendu complexe mais n'est pas toujours visible, chargez-le paresseusement.
• Sections conditionnelles : Si une section entière de l'interface n'est affichée que sous certaines conditions (par exemple, pour les administrateurs), vous pouvez utiliser `React.lazy`.

Bonnes pratiques :

• Appliquez-le au niveau des routes d'abord : C'est généralement là que le gain est le plus significatif.
• Ne découpez pas trop finement : Créer des dizaines de tout petits chunks peut aussi avoir un impact négatif sur les performances réseau (latence des requêtes). Trouvez le bon équilibre.
• Fournissez un bon fallback : L'indicateur de chargement dans `Suspense` est important pour l'UX. Evitez les mises en page qui sautent (layout shifts) pendant le chargement.
• Gestion des erreurs : Que se passe-t-il si le chargement du chunk échoue (problème réseau) ? Vous pouvez envelopper votre composant `Suspense` dans une Error Boundary (voir chapitre suivant) pour gérer ces erreurs de chargement.
• Préchargement (Preloading) : Pour améliorer encore l'expérience, vous pouvez envisager des stratégies de préchargement des chunks (par exemple, au survol d'un lien) en utilisant des techniques plus avancées (non couvertes par `React.lazy` de base, mais possibles avec Webpack ou des bibliothèques tierces).

En conclusion, le code splitting avec `React.lazy` et `Suspense` est une technique d'optimisation essentielle pour les applications React modernes. En chargeant le code à la demande, vous réduisez la taille du bundle initial, accélérez le temps de chargement perçu par l'utilisateur et améliorez significativement les performances globales, en particulier pour les applications de grande taille.