Snippet

Code-Splitting mit React.lazy und Suspense

React.lazy ermöglicht das dynamische Laden von Komponenten mittels dynamic import(). In Kombination mit Suspense erlaubt es, schwere Komponenten erst bei Bedarf zu laden, was die initialen Ladezeiten erheblich reduziert.

snippet.js

javascript

const AnalyticsChart = React.lazy(() => import('./AnalyticsChart'));
 
function Dashboard() {
  return (
    <div>
      <h1>System Status</h1>
      <React.Suspense fallback={<p>Loading chart...</p>}>
        <AnalyticsChart />
      </React.Suspense>
    </div>
  );
}

react

Erklärung

React.lazy(() => import('./AnalyticsChart'))

Definiert eine Komponente, die beim ersten Rendern automatisch über einen separaten Netzwerk-Request abgerufen wird.

<React.Suspense fallback={...}>

Ein Wrapper, der ein Lade-Interface (Fallback) anzeigt, während die verzögert geladene Komponente heruntergeladen wird.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Code-Splitting mit React.lazy und Suspense

Verwandt