Codeaufteilung mit React.lazy und Suspense

Sie sollten Nutzern nie mehr Code als nötig senden. Teilen Sie Ihre Bundles also auf, um das zu vermeiden.

Houssein Djirdeh
Jeff Posnick

Mit der Methode React.lazy lässt sich eine React-Anwendung mithilfe dynamischer Importe ganz einfach auf Komponentenebene aufteilen.

import React, { lazy } from 'react';

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

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
)

Welchen Nutzen bieten sie?

Eine große React-Anwendung besteht in der Regel aus vielen Komponenten, Hilfsmethoden und Bibliotheken von Drittanbietern. Wenn nicht versucht wird, verschiedene Teile einer Anwendung nur bei Bedarf zu laden, wird ein einzelnes, großes JavaScript-Bundle an Ihre Nutzer gesendet, sobald sie die erste Seite laden. Das kann sich erheblich auf die Seitenleistung auswirken.

Die React.lazy-Funktion bietet eine integrierte Möglichkeit, Komponenten in einer Anwendung mit sehr wenig Aufwand in separate JavaScript-Chunks aufzuteilen. Sie können sich dann um das Laden von Status kümmern, wenn Sie die Komponente mit Suspense kombinieren.

Spannung

Das Problem beim Senden einer großen JavaScript-Nutzlast an Nutzer ist die lange Ladezeit der Seite, insbesondere auf schwächeren Geräten und bei langsamen Netzwerkverbindungen. Deshalb sind Code-Splitting und Lazy Loading äußerst nützlich.

Es wird jedoch immer eine leichte Verzögerung geben, die Nutzer erleben müssen, wenn eine codeaufgeteilte Komponente über das Netzwerk abgerufen wird. Daher ist es wichtig, einen nützlichen Ladestatus anzuzeigen. Dieses Problem lässt sich mit React.lazy und der Komponente Suspense beheben.

import React, { lazy, Suspense } from 'react';

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

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
)

Suspense akzeptiert eine fallback-Komponente, mit der Sie eine beliebige React-Komponente als Ladestatus anzeigen können. Das folgende Beispiel zeigt, wie das funktioniert. Der Avatar wird nur gerendert, wenn auf die Schaltfläche geklickt wird. Dann wird eine Anfrage gesendet, um den für das gesperrte AvatarComponent erforderlichen Code abzurufen. In der Zwischenzeit wird die Fallback-Ladekomponente angezeigt.

Der Code, aus dem AvatarComponent besteht, ist kurz, weshalb der Ladestatus nur kurz angezeigt wird. Das Laden größerer Komponenten kann viel länger dauern, insbesondere bei schwachen Netzwerkverbindungen.

So können Sie besser nachvollziehen, wie das funktioniert:

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.
  • Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  • Klicken Sie auf den Tab Netzwerk.
  • Klicken Sie auf das Drop-down-Menü Drosselung, das standardmäßig auf Keine Drosselung eingestellt ist. Wählen Sie 3G – schnell aus.
  • Klicken Sie in der App auf die Schaltfläche Click Me (Klick mich).

Die Fortschrittsanzeige wird jetzt länger angezeigt. Beachten Sie, dass der gesamte Code, aus dem AvatarComponent besteht, als separater Teil abgerufen wird.