𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁

𝗟𝗲 𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗱𝗮𝗻𝘀 𝗥𝗲𝗮𝗰𝘁

Les applications React volumineuses créent de gros bundles JavaScript. Les bundles volumineux ralentissent votre site. Les utilisateurs attendent plus longtemps avant de pouvoir interagir avec votre application. Cela nuit à votre expérience utilisateur.

Le lazy loading résout ce problème. Il charge les composants uniquement lorsque les utilisateurs en ont besoin. Vous ne chargez plus tout en même temps.

Avantages du lazy loading :

• Taille du bundle initial plus réduite
• Chargement des pages plus rapide
• Meilleure expérience utilisateur
• Consommation de bande passante réduite
• Amélioration des Core Web Vitals

Comment utiliser React.lazy() React fournit une fonction appelée lazy() pour importer des composants de manière dynamique. React télécharge le code uniquement lorsqu'il rend le composant.

Exemple de code :

import { lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

Vous devez utiliser Suspense avec les composants lazy. Suspense affiche une interface de secours (fallback UI) pendant que le composant se charge.

Exemple de code :

import { Suspense, lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductDetail />
    </Suspense>
  );
}

Deux règles pour réussir :

• Vos composants doivent utiliser des exports par défaut (default exports).
• Déclarez vos imports lazy en dehors de vos fonctions de composant.

Utilisez-vous le lazy loading dans vos projets ? Laissez un commentaire ci-dessous. Je vous répondrai.

Source: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk