Lazy Loading & performance d’une application React

Le Lazy Loading est une technique d’optimisation des performances qui consiste à charger les éléments d’une application, tels que les images ou les composants, uniquement lorsqu’ils sont nécessaires.

Dans cet article, nous verrons comment implémenter le Lazy Loading dans une Progressive Web App (PWA) en utilisant React.

Nous explorerons des exemples d’architecture et de code pour illustrer chaque étape du processus.

Étape 1 : Installation et configuration de l’environnement

Pour commencer, assurez-vous d’avoir installé Node.js et npm sur votre machine. Ensuite, installez Create React App en exécutant la commande suivante :

npx create-react-app ma-pwa-lazy-loading

Accédez au répertoire du projet nouvellement créé :

cd ma-pwa-lazy-loading

Étape 2 : Création de composants

Créez deux nouveaux composants, ComponentA et ComponentB, qui seront chargés à la demande.

Dans le répertoire src, créez un dossier components et deux fichiers, ComponentA.js et ComponentB.js.

Dans ComponentA.js :

import React from 'react';

const ComponentA = () => {
  return (
    <div>
      <h1>Composant A</h1>
    </div>
  );
};

export default ComponentA;

Dans ComponentB.js :

import React from 'react';

const ComponentB = () => {
  return (
    <div>
      <h1>Composant B</h1>
    </div>
  );
};

export default ComponentB;

Étape 3 : Implémentation du Lazy Loading

Modifiez le fichier src/App.js pour utiliser React.lazy() et Suspense. Ces deux API permettent de charger les composants à la demande. Importez les composants en utilisant React.lazy() :

import React, { lazy, Suspense } from 'react';

const ComponentA = lazy(() => import('./components/ComponentA'));
const ComponentB = lazy(() => import('./components/ComponentB'));

Utilisez Suspense pour envelopper les composants qui seront chargés à la demande et définissez un élément de repli (fallback) à afficher pendant le chargement :

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Mon PWA avec Lazy Loading</h1>
      </header>
      <main>
        <Suspense fallback={<div>Chargement...</div>}>
          <ComponentA />
          <ComponentB />
        </Suspense>
      </main>
    </div>
  );
}

export default App;

Étape 4 : Test du Lazy Loading

Lancez l’application en utilisant la commande suivante :

npm start

Ouvrez le navigateur et accédez à http://localhost:3000.

Vous devriez voir les composants ComponentA et ComponentB s’afficher à l’écran.

Ouvrez l’onglet Network dans les outils de développement de votre navigateur et rafraîchissez la page.

Vous verrez que les fichiers ComponentA.js et ComponentB.js sont chargés uniquement lorsque leur contenu est nécessaire.

Étape 5 : Utilisation du Route-based Lazy Loading

Pour les applications plus complexes, il est préférable d’implémenter un Lazy Loading basé sur les routes.

Installez react-router-dom pour gérer les routes :

npm install react-router-dom

Dans le répertoire src, créez un dossier pages et deux fichiers, PageA.js et PageB.js.

Dans PageA.js :

import React from 'react';
import ComponentA from '../components/ComponentA';

const PageA = () => {
  return (
    <div>
      <h1>Page A</h1>
      <ComponentA />
    </div>
  );
};

export default PageA;

Dans PageB.js :

import React from 'react';
import ComponentB from '../components/ComponentB';

const PageB = () => {
  return (
    <div>
      <h1>Page B</h1>
      <ComponentB />
    </div>
  );
};

export default PageB;

Modifiez le fichier src/App.js pour inclure le routeur et charger les pages à la demande :

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

const PageA = lazy(() => import('./pages/PageA'));
const PageB = lazy(() => import('./pages/PageB'));

function App() {
  return (
    <Router>
      <div className="App">
        <header className="App-header">
          <h1>Mon PWA avec Route-based Lazy Loading</h1>
          <nav>
            <ul>
              <li>
                <Link to="/page-a">Page A</Link>
              </li>
              <li>
                <Link to="/page-b">Page B</Link>
              </li>
            </ul>
          </nav>
        </header>
        <main>
          <Suspense fallback={<div>Chargement...</div>}>
            <Switch>
              <Route path="/page-a" component={PageA} />
              <Route path="/page-b" component={PageB} />
            </Switch>
          </Suspense>
        </main>
      </div>
    </Router>
  );
}

export default App;

Étape 6 : Test du Route-based Lazy Loading

Lancez l’application avec la commande :

npm start

Ouvrez le navigateur et accédez à http://localhost:3000.

Naviguez entre les pages A et B en cliquant sur les liens.

Vous verrez dans l’inspecteur que les fichiers PageA.js et PageB.js sont chargés à la demande, en fonction de la route active.

Conclusion

Dans cet article, nous avons expliqué comment implémenter le Lazy Loading dans une PWA avec React.

Nous avons vu comment utiliser React.lazy() et Suspense pour charger des composants à la demande et comment mettre en œuvre le Lazy Loading basé sur les routes avec react-router-dom.

En implémentant ces techniques, vous améliorerez les performances de votre application en réduisant le temps de chargement initial et en ne chargeant que les éléments nécessaires.