Carica in modo lazy i componenti React con lazy() e Suspense, dividi le route in React Router, rimanda le immagini con loading="lazy" ed evita di rallentare l'immagine principale. Con demo dal vivo.
Il lazy loading in React significa scaricare codice o immagini solo quando servono. Avvolgi un import dinamico in lazy(), renderizza il componente dentro un boundary Suspense con un fallback, e React lo scarica al primo render. Per le immagini, l'attributo HTML loading="lazy" fa lo stesso, ma mai sull'immagine principale above the fold.
Quale strumento di lazy loading per quale compito
Un bundle grande fa aspettare ogni visitatore per codice che magari non userà mai, come un grafico in una scheda delle impostazioni o una pagina di amministrazione. Il lazy loading divide quel codice in file separati che il browser scarica su richiesta. Prova la demo qui sotto, poi copia gli schemi per componenti, route, immagini e contenuti attivati dallo scorrimento.
Un componente che puoi renderizzare. La sua funzione di caricamento deve restituire una Promise che si risolve in un oggetto la cui proprietà default è un componente React valido, come fa un import() dinamico di un export default.
No. react.dev dice che sia la Promise restituita sia il suo valore risolto vengono messi in cache, quindi React non chiama la funzione di caricamento più di una volta. La demo in questa pagina mostra che la seconda apertura è istantanea.
lazy() si aspetta un export default. Per uno con nome, mappalo dentro la funzione di caricamento: lazy(() => import("./Charts").then((m) => ({ default: m.SalesChart }))).
Sì, per l'immagine più grande sullo schermo. web.dev ha rilevato che il lazy loading delle immagini above the fold tendeva a rallentare il Largest Contentful Paint, e che caricare in modo lazy solo le immagini below the fold manteneva il risparmio di dati senza quel costo.
React lancia il motivo del rifiuto durante il render, e l'error boundary più vicino lo intercetta. Senza un error boundary, react.dev dice che React rimuove per impostazione predefinita la UI dell'app dallo schermo.
Lo schema standard: una dichiarazione lazy in cima al file e un boundary Suspense intorno al punto in cui viene renderizzato.
Il file del grafico non viene scaricato finché showChart non diventa true per la prima volta.
Gli oggetti route di React Router accettano una funzione lazy che restituisce le proprietà della route, così ogni pagina diventa un file a sé.
La pagina dei report e il suo loader si scaricano solo quando qualcuno visita /reports.
I browser gestiscono nativamente il lazy loading delle immagini. Segna come lazy le immagini below the fold e dai all'immagine principale una priorità di fetch alta.
Larghezza e altezza riservano lo spazio, così niente si sposta quando l'immagine arriva.
Per contenuti che non sono immagini, come una mappa o un widget di recensioni, un piccolo hook ti dice quando il suo riquadro entra nello schermo.
Il rootMargin di 200px avvia il caricamento un po' prima che il riquadro sia visibile; una volta visto, l'observer si disconnette.
Questo pulsante renderizza un componente creato con lazy(). Il suo download è simulato in modo da durare 2 secondi la prima volta.
Mostra il grafico vendite
Nascondi il grafico vendite
Caricamento del file del grafico...
File del grafico caricato. Nascondilo e mostralo di nuovo: appare subito, perché React ha messo in cache il primo caricamento.
Vendite per mese
Inizia gratis · Nessuna carta di credito richiesta