Dynamische Imports

In dieser Lektion werden wir die Menge an JavaScript reduzieren, die während des initialen Seitenladens von Drittanbieter-Bibliotheken geladen wird.

Next.js unterstützt ES2020 dynamische import() für JavaScript. Damit können Sie JavaScript-Module dynamisch importieren und mit ihnen arbeiten. Sie funktionieren auch mit Server-seitigem Rendering (SSR).

Betrachten Sie dynamische Imports als eine weitere Möglichkeit, Ihren Code in handliche Teile aufzuteilen.

Öffnen Sie die Datei pages/index.js und entfernen Sie diese beiden Imports am Anfang der Datei, da wir sie weiter unten in der Datei dynamisch importieren werden.

import Fuse from 'fuse.js';
import _ from 'lodash';

Vorübergehend wollen wir auch entfernen:

const fuse = new Fuse(countries, {
  keys: ['name'],
  threshold: 0.3,
});

Nachdem wir diesen Code entfernt haben, richten wir das Suchfeld so ein, dass es die dynamisch importierten Bibliotheken verwendet.

Wir können das Eingabefeld durch folgenden Code ersetzen:

<input
  type="text"
  placeholder="Ländersuche..."
  className={styles.input}
  onChange={async (e) => {
    const { value } = e.currentTarget;
    // Bibliotheken dynamisch laden
    const Fuse = (await import('fuse.js')).default;
    const _ = (await import('lodash')).default;
 
    const fuse = new Fuse(countries, {
      keys: ['name'],
      threshold: 0.3,
    });
 
    const searchResult = fuse.search(value).map((result) => result.item);
 
    const updatedResults = searchResult.length ? searchResult : countries;
    setResults(updatedResults);
 
    // Fiktiver Analytics-Treffer
    console.info({
      searchedAt: _.now(),
    });
  }}
/>

Durch die Verwendung von Dynamischen Imports wird das Problem "Unbenutztes JavaScript entfernen" beim Seitenladen behoben. Dies verbessert auch unsere Time to Interactive (TTI), was zur Verbesserung der First Input Delay (FID) beiträgt.

Lassen Sie uns einen weiteren Lighthouse-Bericht in den Chrome DevTools ausführen, um unseren Fortschritt zu sehen.

Weiterführende Literatur

• Next.js: Dokumentation zu Dynamischen Imports