Snippet

Code-Splitting mit React.lazy und Suspense

React.lazy ermöglicht es, eine Komponente zu definieren, die dynamisch geladen wird. Dies hilft, die initiale Bundle-Größe zu reduzieren, indem das Laden von Code verzögert wird, der nicht sofort benötigt wird. Suspense bietet einen Ladezustand, während auf das Laden der Komponente gewartet wird.

snippet.js

javascript

import { lazy, Suspense } from 'react';
 
const HeavyComponent = lazy(() => import('./HeavyComponent'));
 
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

react

Erklärung

lazy(() => import('./HeavyComponent'))

Verwendet dynamisches import(), um die Komponentendatei erst abzurufen, wenn sie gerendert wird.

Gibt die UI an, die angezeigt werden soll, während die per Lazy-Loading geladene Komponente abgerufen wird.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Code-Splitting mit React.lazy und Suspense

Verwandt