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

Le grandi applicazioni React creano bundle JavaScript di grandi dimensioni. I bundle pesanti rallentano il tuo sito. Gli utenti devono attendere più a lungo per interagire con la tua app. Questo danneggia la tua esperienza utente.

Il lazy loading risolve questo problema. Carica i componenti solo quando gli utenti ne hanno bisogno. Smetti di caricare tutto in una volta sola.

Vantaggi del lazy loading:

Come usare React.lazy() React fornisce una funzione chiamata lazy() per importare i componenti dinamicamente. React scarica il codice solo quando renderizza il componente.

Esempio di codice: import { lazy } from "react";

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

Devi usare Suspense con i componenti lazy. Suspense mostra una UI di fallback mentre il componente viene caricato.

Esempio di codice: import { Suspense, lazy } from "react";

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

function App() { return ( <Suspense fallback={

Loading...
}> ); }

Due regole per il successo:

  • I tuoi componenti devono utilizzare gli export di default.
  • Dichiara i tuoi import lazy al di fuori delle funzioni dei componenti.

Usi il lazy loading nei tuoi progetti? Lascia un commento qui sotto. Ti risponderò.

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