Lazy Loading ist eine Technik, die das Laden bestimmter Teile einer Webseite verzögert, bis diese Teile benötigt werden. In Bezug auf ReactJS bedeutet dies, dass bestimmte Komponenten erst dann geladen werden, wenn sie tatsächlich benötigt werden. Dies kann die Leistung verbessern, indem die anfängliche Ladezeit der Webseite verringert und Netzwerk- oder CPU-Kosten gesenkt werden.
Ab React 16.6.0 gibt es eine eingebaute Möglichkeit zur Verwendung von Lazy Loading mit `React.lazy` und `React.Suspense`.
So verwenden Sie Lazy Loading in Ihrem React-Projekt:
1. Importieren Sie `React` und `lazy` aus dem `react`-Paket.
```jsx import React, { lazy, Suspense } from “react”; ```2. Verwenden Sie die `lazy`-Funktion, um Ihre Komponente zu importieren.
```jsx const SomeComponent = lazy(() => import(“./SomeComponent”)); ``` `React.lazy` nimmt eine Funktion, die einen dynamischen Importaufruf zurückgibt und gibt dann einen Lazy Component zurück. Dieser wird dann erst geladen, wenn er gerendert wird.3. Verwenden Sie `Suspense` zum Deferieren des Rendern von Teilbaum weiter unten in der Liste, bis zum Laden der Scripts.
```jsxBeachten Sie, dass `React.lazy` und `Suspense` derzeit nur das Laden von Code unterstützen. Wenn Daten geladen werden müssen, wird dies möglicherweise durch zukünftige Funktionen unterstützt.
Anmerkung: Falls Sie Server Side Rendering verwenden, ist React.lazy zurzeit noch keine gute Lösung.
