M

MLOG

Français

Débloquez des temps de chargement initiaux plus rapides et une performance améliorée pour vos applications React avec le lazy loading et la division du code en composants.

React Lazy Loading : Division du code en composants pour une performance optimisée

Dans le monde numérique actuel, où tout va très vite, la performance des sites web est primordiale. Les utilisateurs s'attendent à une satisfaction immédiate, et les temps de chargement lents peuvent entraîner de la frustration, des abandons de panier et une image de marque négative. Pour les applications React, l'optimisation des performances est essentielle pour offrir une expérience utilisateur fluide et engageante. Une technique puissante pour y parvenir est le lazy loading avec la division du code en composants.

Qu'est-ce que le Lazy Loading et la division du code ?

Le lazy loading est une technique où les ressources, telles que les images, les scripts et les composants, ne sont chargées que lorsqu'elles sont nécessaires, plutôt que toutes en une seule fois lors du chargement initial de la page. Cela réduit considérablement la quantité de données qui doivent être téléchargées et analysées au départ, ce qui se traduit par des temps de chargement initiaux plus rapides et une amélioration de la performance perçue.

La division du code est le processus de division du code de votre application en morceaux (ou bundles) plus petits et plus gérables. Cela permet au navigateur de ne télécharger que le code nécessaire à la vue initiale, en différant le chargement des autres codes jusqu'à ce qu'ils soient réellement requis. Le lazy loading exploite la division du code pour charger des composants spécifiques uniquement lorsqu'ils sont sur le point d'être rendus.

Pourquoi utiliser le Lazy Loading et la division du code dans React ?

Voici pourquoi vous devriez envisager d'intégrer le lazy loading et la division du code dans vos projets React :

Comment implémenter le Lazy Loading dans React

React offre une prise en charge intégrée du lazy loading à l'aide des composants React.lazy et Suspense. Voici un guide étape par étape :

1. Utilisation de React.lazy()

React.lazy() vous permet d'importer dynamiquement des composants, divisant ainsi efficacement votre code en morceaux séparés. Il prend une fonction qui appelle import(), qui renvoie une Promise qui résout au composant.


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

Dans cet exemple, MyComponent ne sera chargé que lorsqu'il sera sur le point d'être rendu.

2. Enveloppement avec <Suspense>

Étant donné que React.lazy() utilise des importations dynamiques, qui sont asynchrones, vous devez envelopper le composant chargé paresseusement avec un composant <Suspense>. Le composant <Suspense> vous permet d'afficher une interface utilisateur de repli (par exemple, une animation de chargement) pendant que le composant est en cours de chargement.


import React, { Suspense } from 'react';

function MyPage() {
  return (
    Loading...
}> ); }

Dans cet exemple, le message Loading... s'affichera pendant que MyComponent est en cours de chargement. Une fois le composant chargé, il remplacera l'interface utilisateur de repli.

3. Exemple pratique : Lazy Loading d'une grande galerie d'images

Considérons un scénario où vous avez une grande galerie d'images. Le chargement de toutes les images en une seule fois peut avoir un impact important sur les performances. Voici comment vous pouvez charger paresseusement les images à l'aide de React.lazy() et <Suspense> :


import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./Image'));

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Image 1' },
    { id: 2, src: 'image2.jpg', alt: 'Image 2' },
    { id: 3, src: 'image3.jpg', alt: 'Image 3' },
    // ... more images
  ];

  return (
    

      {images.map(image => (
        Loading image...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

Et le composant Image.js :


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Dans cet exemple, chaque image est enveloppée dans un composant <Suspense>, de sorte qu'un message de chargement s'affiche pour chaque image pendant son chargement. Cela empêche le blocage de toute la page pendant le téléchargement des images.

Techniques avancées et considérations

1. Limites d'erreur

Lorsque vous utilisez le lazy loading, il est important de gérer les erreurs potentielles qui peuvent survenir pendant le processus de chargement. Les limites d'erreur peuvent être utilisées pour intercepter ces erreurs et afficher une interface utilisateur de repli. Vous pouvez créer un composant de limite d'erreur comme ceci :


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Ensuite, enveloppez le composant <Suspense> avec le <ErrorBoundary> :



  Loading...}>

Si une erreur se produit lors du chargement de MyComponent, le <ErrorBoundary> l'interceptera et affichera l'interface utilisateur de repli.

2. Rendu côté serveur (SSR) et Lazy Loading

Le lazy loading peut également être utilisé en conjonction avec le rendu côté serveur (SSR) pour améliorer le temps de chargement initial de votre application. Toutefois, cela nécessite une configuration supplémentaire. Vous devrez vous assurer que le serveur peut correctement gérer les importations dynamiques et que les composants chargés paresseusement sont correctement hydratés du côté client.

Des outils comme Next.js et Gatsby.js offrent une prise en charge intégrée du lazy loading et de la division du code dans les environnements SSR, ce qui facilite grandement le processus.

3. Préchargement des composants chargés paresseusement

Dans certains cas, vous voudrez peut-être précharger un composant chargé paresseusement avant qu'il ne soit réellement nécessaire. Cela peut être utile pour les composants qui sont susceptibles d'être rendus bientôt, tels que les composants situés sous la ligne de flottaison mais qui sont susceptibles d'être affichés. Vous pouvez précharger un composant en appelant manuellement la fonction import() :


import('./MyComponent'); // Preload MyComponent

Cela démarrera le chargement du composant en arrière-plan, de sorte qu'il sera disponible plus rapidement lorsqu'il sera réellement rendu.

4. Importations dynamiques avec commentaires magiques Webpack

Les "commentaires magiques" de Webpack permettent de personnaliser les noms des morceaux de code générés. Cela peut être utile pour déboguer et analyser la structure du bundle de votre application. Par exemple :


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Cela créera un morceau de code nommé "my-component.js" (ou similaire) au lieu d'un nom générique.

5. Éviter les pièges courants

Exemples concrets et cas d'utilisation

Le lazy loading peut être appliqué à un large éventail de scénarios pour améliorer les performances des applications React. Voici quelques exemples :

Exemple : Site web de commerce électronique international

Imaginez un site web de commerce électronique vendant des produits dans le monde entier. Différents pays peuvent avoir des devises, des langues et des catalogues de produits différents. Au lieu de charger toutes les données pour chaque pays au départ, vous pouvez utiliser le lazy loading pour charger les données spécifiques à l'emplacement de l'utilisateur uniquement lorsqu'il visite le site.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Fonction pour déterminer le pays de l'utilisateur

  return (
    Loading content for your region...}>
      
      
    
  );
}

Conclusion

Le lazy loading et la division du code en composants sont des techniques puissantes pour optimiser les performances des applications React. En ne chargeant les composants que lorsqu'ils sont nécessaires, vous pouvez réduire considérablement le temps de chargement initial, améliorer l'expérience utilisateur et améliorer votre SEO. Les composants intégrés React.lazy() et <Suspense> de React facilitent l'implémentation du lazy loading dans vos projets. Adoptez ces techniques pour créer des applications web plus rapides, plus réactives et plus attrayantes pour un public mondial.

N'oubliez pas de toujours tenir compte de l'expérience utilisateur lors de l'implémentation du lazy loading. Fournissez des interfaces utilisateur de repli informatives, gérez gracieusement les erreurs potentielles et analysez attentivement les performances de votre application pour vous assurer d'obtenir les résultats souhaités. N'ayez pas peur d'expérimenter différentes approches et de trouver la meilleure solution pour vos besoins spécifiques.