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

Große React-Apps erzeugen große JavaScript-Bundles. Große Bundles verlangsamen Ihre Website. Nutzer müssen länger warten, um mit Ihrer App zu interagieren. Dies beeinträchtigt Ihre User Experience.

Lazy Loading löst dieses Problem. Es lädt Komponenten erst dann, wenn die Nutzer sie benötigen. Sie laden nicht mehr alles auf einmal.

Vorteile von Lazy Loading:

So verwenden Sie React.lazy() React stellt eine Funktion namens lazy() bereit, um Komponenten dynamisch zu importieren. React lädt den Code erst herunter, wenn die Komponente gerendert wird.

Beispielcode: import { lazy } from "react";

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

Sie müssen Suspense zusammen mit lazy-Komponenten verwenden. Suspense zeigt eine Fallback-UI an, während die Komponente geladen wird.

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

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

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

Loading...
}> ); }

Zwei Regeln für den Erfolg:

  • Ihre Komponenten müssen Default-Exports verwenden.
  • Deklarieren Sie Ihre lazy-Imports außerhalb Ihrer Komponentenfunktionen.

Nutzen Sie Lazy Loading in Ihren Projekten? Hinterlassen Sie unten einen Kommentar. Ich werde Ihnen antworten.

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