Snippet

Code-Splitting von Komponenten mit React.lazy und Suspense

React.lazy ermöglicht das dynamische, asynchrone Laden von Komponenten-Bundles bei Bedarf. Durch das Umschließen mit Suspense kann ein Fallback-Platzhalter definiert werden, was die anfängliche Bundle-Größe reduziert und die Ladeleistung der Webseite verbessert.

snippet.js

javascript

import React, { Suspense, lazy } from 'react';
 
const AnalyticsDashboard = lazy(() => import('./AnalyticsDashboard'));
 
function App() {
  return (
    <div>
      <h1>Admin Area</h1>
      <Suspense fallback={<p>Loading dashboard bundle...</p>}>
        <AnalyticsDashboard />
      </Suspense>
    </div>
  );
}

react

Erklärung

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

Importiert den Komponenten-Chunk dynamisch und asynchron, sobald er erstmals benötigt wird.

<Suspense fallback={<p>Loading dashboard bundle...</p>}>

Gibt ein temporäres Fallback-JSX-Element an, das während des Downloads des Bundles angezeigt wird.

Rendert die verzögert geladene Komponente, sobald das Modul vollständig heruntergeladen ist.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Code-Splitting von Komponenten mit React.lazy und Suspense

Verwandt