Chargez à la demande vos composants React avec lazy() et Suspense, découpez les routes dans React Router, différez les images avec loading="lazy" et évitez de ralentir votre image principale. Démo en direct incluse.
Le lazy loading en React consiste à ne récupérer du code ou des images qu'au moment où ils sont nécessaires. Enveloppez un import dynamique dans lazy(), affichez le composant dans une frontière Suspense avec un fallback, et React le télécharge au premier rendu. Pour les images, l'attribut HTML loading="lazy" fait la même chose, mais jamais sur votre image principale au-dessus de la ligne de flottaison.
Quel outil de lazy loading pour quel besoin
Un gros bundle applicatif fait attendre chaque visiteur pour du code qu'il n'utilisera peut-être jamais, comme un graphique dans un onglet de paramètres ou une page d'administration. Le lazy loading découpe ce code en fichiers séparés que le navigateur récupère à la demande. Essayez la démo ci-dessous, puis copiez les modèles pour les composants, les routes, les images et le contenu déclenché au défilement.
Un composant que vous pouvez afficher. Sa fonction de chargement doit renvoyer une Promise qui se résout en un objet dont la propriété default est un composant React valide, ce que fait un import() dynamique d'un export par défaut.
Non. react.dev indique que la Promise renvoyée et sa valeur résolue sont toutes deux mises en cache, donc React n'appelle pas la fonction de chargement plus d'une fois. La démo de cette page montre la deuxième ouverture instantanée.
lazy() attend un export par défaut. Pour un export nommé, faites la correspondance dans la fonction de chargement : lazy(() => import("./Charts").then((m) => ({ default: m.SalesChart }))).
Oui, pour la plus grande image à l'écran. web.dev a constaté que le lazy loading des images au-dessus de la ligne de flottaison avait tendance à ralentir le Largest Contentful Paint, et que charger en différé uniquement les images sous la ligne de flottaison conservait les économies de données sans ce coût.
React lève la raison du rejet pendant le rendu, et l'error boundary la plus proche l'intercepte. Sans error boundary, react.dev indique que React retire par défaut l'interface de l'application de l'écran.
Le modèle standard : une déclaration lazy en haut du fichier, et une frontière Suspense autour de l'endroit où il s'affiche.
Le fichier du graphique n'est pas récupéré tant que showChart ne passe pas à true pour la première fois.
Les objets de route de React Router acceptent une fonction lazy qui renvoie les propriétés de la route, ainsi chaque page devient son propre fichier.
La page des rapports et son loader ne se téléchargent que lorsque quelqu'un visite /reports.
Les navigateurs gèrent nativement le chargement différé des images. Marquez les images sous la ligne de flottaison comme lazy et donnez à l'image principale une priorité de récupération élevée.
La largeur et la hauteur réservent l'espace pour que rien ne bouge à l'arrivée de l'image.
Pour un contenu qui n'est pas une image, comme une carte ou un widget d'avis, un petit hook vous indique quand son bloc entre à l'écran.
Le rootMargin de 200px lance le chargement un peu avant que le bloc soit visible ; une fois vu, l'observer se déconnecte.
Ce bouton affiche un composant créé avec lazy(). Son téléchargement est simulé pour durer 2 secondes la première fois.
Afficher le graphique des ventes
Masquer le graphique des ventes
Chargement du fichier du graphique...
Fichier du graphique chargé. Masquez-le puis affichez-le à nouveau : il apparaît immédiatement, car React a mis le premier chargement en cache.
Ventes par mois
Commencer gratuitement · Sans carte bancaire