Le “Lazy loading” est une tactique d’optimisation qui consiste à ne charger les ressources (dans ce cas, les composants React) que lorsque c’est nécessaire. Ceci contribue à réduire les temps de chargement et à maximiser les performances de vos applications React.
React propose une fonctionnalité native, `React.lazy()`, pour mettre en oeuvre le lazy loading dans vos applications. Voici les étapes pour l’utiliser:
1. Importation du module Lazy et Suspense de React: \`\`\`jsx import React, { lazy, Suspense } from ‘react’; \`\`\`
1. Remplacez l’importation de vos composants par une version lazy: \`\`\`jsx // Avant // import MyComponent from ‘./MyComponent’;
// Après const MyComponent = lazy(() => import(‘./MyComponent’)); \`\`\` Le `lazy()` est une fonction qui vous permet de charger des composants dynamiquement en tant que fonction qui renvoie une promesse.1. Enveloppez les composants Lazy dans un composant Suspense:
\`\`\`jsx function App() { return (Cette méthode de lazy loading est fortement recommandée pour les grandes applications et surtout pour les routes. Cependant, `React.lazy()` et `Suspense` ne sont pas encore disponibles pour le rendu côté serveur. Pour cela, vous pourriez envisager des bibliothèques comme Loadable Components.
