Code-Splitting mit React.lazy und Suspense

Snippet

Code-Splitting mit React.lazy und Suspense

React.lazy ermöglicht es, Komponenten dynamisch erst dann zu laden, wenn sie benötigt werden. In Kombination mit Suspense können Sie eine Fallback-UI anzeigen, während der Browser den separaten JavaScript-Chunk lädt, was die Performance beim ersten Seitenaufruf erheblich verbessert.

snippet.js
javascript
import React, { Suspense, lazy } from 'react';
 
const HeavyChart = lazy(() => import('./HeavyChart'));
 
function Dashboard() {
  return (
    <Suspense fallback={<div>Loading chart...</div>}>
      <HeavyChart data={stats} />
    </Suspense>
  );
}

react

Erklärung

const HeavyChart = lazy(() => import('./HeavyChart'));

Erstellt eine Komponente, die über einen dynamischen Import-Ausdruck geladen wird.

Ein Wrapper, der erkennt, wenn Kinder auf eine dynamische Ressource warten, und stattdessen das Fallback anzeigt.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Verwandt

Aus deiner Bibliothek