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

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

Grote React-apps creëren grote JavaScript-bundles. Grote bundles vertragen je site. Gebruikers moeten langer wachten om met je app te interageren. Dit schaadt je gebruikerservaring.

Lazy loading lost dit op. Het laadt componenten pas wanneer gebruikers ze nodig hebben. Je stopt met het in één keer laden van alles.

Voordelen van lazy loading:

• Kleinere initiële bundle-grootte
• Snellere paginalaad tijden
• Betere gebruikerservaring
• Lager bandbreedteverbruik
• Betere Core Web Vitals

Hoe gebruik je React.lazy() React biedt een functie genaamd lazy() om componenten dynamisch te importeren. React downloadt de code pas wanneer het de component rendert.

Voorbeeldcode: import { lazy } from "react";

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

Je moet Suspense gebruiken met lazy componenten. Suspense toont een fallback UI terwijl de component wordt geladen.

Voorbeeldcode: import { Suspense, lazy } from "react";

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

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

}> ); }

Twee regels voor succes:

• Je componenten moeten default exports gebruiken.
• Declareer je lazy imports buiten je componentfuncties.

Gebruik jij lazy loading in je projecten? Laat hieronder een reactie achter. Ik zal op je reageren.

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