Codeaufteilung mit dynamischen Importen in Next.js

Next.js-App durch Codeaufteilung und intelligente Ladestrategien beschleunigen

Milica Mihajlija

Themen in dieser Anleitung

In diesem Post werden die verschiedenen Arten von Code erläutert. Aufteilung und wie Sie um die Geschwindigkeit Ihrer Next.js-Apps zu beschleunigen.

Routen- und komponentenbasierte Codeaufteilung

Standardmäßig teilt Next.js Ihren JavaScript-Code für jede Route in separate Blöcke auf. Wenn Nutzer Ihre App laden, sendet Next.js nur den Code, der für den zu leiten. Wenn Nutzer in der Anwendung navigieren, rufen sie die Blöcke ab. die mit den anderen Routen verknüpft sind. Durch die routenbasierte Codeaufteilung wird der das gleichzeitig geparst und kompiliert werden muss, kürzere Seitenladezeiten.

Auch wenn die routenbasierte Codeaufteilung eine gute Standardeinstellung ist, können Sie die mit Codeaufteilung auf Komponentenebene. Wenn Sie große Komponenten in Ihrer App zu erstellen, ist es eine gute Idee, sie in einzelne Blöcke aufzuteilen. So werden große Komponenten, die nicht kritisch sind oder nur auf bestimmten Nutzerinteraktionen (z. B. das Klicken auf eine Schaltfläche) können per Lazy-Loading ausgelöst werden.

Next.js unterstützt dynamische import(), mit dem Sie JavaScript-Module (einschließlich React-Komponenten) dynamisch und laden jeden Import als separaten Block. Dadurch erhalten Sie das Aufteilen von Code auf Komponentenebene und ermöglicht es Ihnen, das Laden von Ressourcen Nutzende nur den Code herunterladen, den sie für den Teil der Website benötigen, die sie sich ansehen. In Next.js werden diese Komponenten serverseitig gerendert, (SSR) ist standardmäßig aktiviert.

Dynamische Importe in Aktion

Dieser Beitrag enthält mehrere Versionen einer Beispiel-App, die aus einer einfachen mit nur einer Schaltfläche. Wenn du auf die Schaltfläche klickst, siehst du einen süßen Welpen. Als Sie die einzelnen Versionen der App durchgehen, sehen Sie, wie dynamische Importe unterscheidet sich von statischen Importe und wie Sie mit ihnen arbeiten können.

In der ersten Version der App lebt der Welpe in components/Puppy.js. Bis wenn der Welpe auf der Seite angezeigt wird, importiert die App die Puppy-Komponente index.js mit einer statischen Importanweisung:

import Puppy from "../components/Puppy";

Wenn Sie wissen möchten, wie Next.js die App bündelt, prüfen Sie den Netzwerk-Trace in den Entwicklertools:

1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild

2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.

3. Klicken Sie auf den Tab Netzwerk.

4. Klicken Sie das Kästchen Cache deaktivieren an.

5. Lade die Seite neu.

Beim Laden der Seite wird der gesamte erforderliche Code, einschließlich der Puppy.js, Komponente, ist in index.js gebündelt:

Wenn Sie auf die Schaltfläche Click me (Klicken Sie) klicken, wird nur die JPEG-Datei des Welpen angefordert. die dem Tab Network hinzugefügt wurden:

Der Nachteil dieses Ansatzes ist, dass Nutzende, die nicht auf die Schaltfläche der Welpe sehen, muss er die Puppy-Komponente laden, index.js. In diesem kleinen Beispiel ist das keine große Sache, aber in der realen Welt ist das ist es oft eine enorme Verbesserung, große Komponenten nur dann zu laden, notwendig ist.

Schauen Sie sich jetzt eine zweite Version der App an, in der der statische Import durch einen dynamischen Import ersetzt. Next.js enthält next/dynamic, wodurch es dynamische Importe für alle Komponenten in „Next“ verwenden:

import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";

// ...

const Puppy = dynamic(import("../components/Puppy"));

Führen Sie die Schritte aus dem ersten Beispiel aus, um den Netzwerk-Trace zu überprüfen.

Beim ersten Laden der App wird nur index.js heruntergeladen. Diesmal ist es um 0,5 KB kleiner (von 37,9 KB auf 37,4 KB), da Er enthält nicht den Code für die Komponente Puppy:

Die Komponente Puppy befindet sich jetzt in einem separaten Block, 1.js, der nur geladen wird. wenn du die Taste drückst:

<ph type="x-smartling-placeholder">

</ph>

Hinweis : Next.js benennt diese dynamischen Blöcke standardmäßig number.js, wobei number mit 1 beginnt.

In realen Anwendungen sind die Komponenten besonders wichtig, größer und per Lazy Loading Ihre anfängliche JavaScript-Nutzlast um Hunderte Kilobyte kürzen kann.

Dynamische Importe mit benutzerdefinierter Ladeanzeige

Beim Lazy Loading von Ressourcen empfiehlt es sich, einen Ladeindikator anzugeben. falls Verzögerungen auftreten. In Next.js können Sie dazu ein zusätzliches Argument für die Funktion dynamic():

const Puppy = dynamic(() => import("../components/Puppy"), {
  loading: () => <p>Loading...</p>
});

Um die Ladeanzeige in Aktion zu sehen, simulieren Sie eine langsame Netzwerkverbindung in Entwicklertools:

1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild

2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.

3. Klicken Sie auf den Tab Netzwerk.

4. Klicken Sie das Kästchen Cache deaktivieren an.

5. Wählen Sie in der Drop-down-Liste Drosselung die Option Schnelles 3G aus.

6. Klicken Sie auf die Schaltfläche Click me.

Wenn Sie jetzt auf die Schaltfläche klicken, dauert es eine Weile, bis die Komponente und die App zeigt die Meldung „Wird geladen...“ an. in der Zwischenzeit erhalten.

Dynamische Importe ohne SSR

Wenn Sie eine Komponente nur auf der Clientseite rendern müssen, zum Beispiel eine Chat- Widget) können Sie dies tun, indem Sie die Option ssr auf false setzen:

const Puppy = dynamic(() => import("../components/Puppy"), {
  ssr: false,
});

Fazit

Next.js unterstützt dynamische Importe und stellt Code auf Komponentenebene bereit. Aufteilung, wodurch die JavaScript-Nutzlasten minimiert und die Anwendung verbessert werden kann. Ladezeit. Alle Komponenten werden standardmäßig serverseitig gerendert. Sie können deaktivieren Sie diese Option bei Bedarf.