Dynamische Imports für Komponenten

Als Nächstes wenden wir uns einer React-Komponente zu, die nicht beim ersten Laden der Seite benötigt wird.

React-Komponenten können ebenfalls mit dynamischen Imports importiert werden, aber in diesem Fall verwenden wir sie in Kombination mit next/dynamic, um sicherzustellen, dass sie wie jede andere React-Komponente funktioniert.

Wir werden diese Methode verwenden, um das Laden unseres Modals mit dem Hello World-Codebeispiel zu verzögern. Dadurch entfernen wir auch zwei weitere Bibliotheken von Drittanbietern aus dem initialen Seitenladevorgang.

Öffnen Sie die Datei pages/index.js und fügen Sie am Anfang der Datei einen Import für dynamic aus next/dynamic hinzu:

import dynamic from 'next/dynamic';

Wir sollten auch diese Zeile entfernen:

import CodeSampleModal from '../components/CodeSampleModal';

Jetzt können wir die Komponente als dynamische Komponente importieren, indem wir Folgendes am Anfang der Datei hinzufügen:

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

CodeSampleModal wird die Standardkomponente sein, die von ../components/CodeSampleModal zurückgegeben wird. Sie funktioniert wie eine reguläre React-Komponente, und Sie können ihr wie gewohnt Props übergeben.

Da wir diese Komponente nicht auf dem Server benötigen, haben wir ssr: false verwendet, um sie zu deaktivieren.

Als Nächstes möchten wir das Laden dieser Komponente verzögern, bis sie vom Benutzer benötigt wird. Dazu können wir die Komponente in eine Bedingung einpacken, die überprüft, ob das Modal geöffnet sein soll, und wenn ja, wird es geladen.

Packen Sie die CodeSampleModal-Komponente wie folgt ein:

{
  isModalOpen && (
    <CodeSampleModal
      isOpen={isModalOpen}
      closeModal={() => setIsModalOpen(false)}
    />
  );
}

Wenn isModalOpen nun zum ersten Mal auf true gesetzt wird, wird das benötigte JavaScript angefordert.

Mit diesen Optimierungen sollten die Vitals jetzt besser aussehen. Lassen Sie uns einen weiteren Lighthouse-Bericht in den Chrome DevTools ausführen, um dies zu überprüfen.

Es bleiben diese beiden Optimierungsvorschläge übrig:

• HTTP2 verwenden: Um dieses Problem zu lösen, können wir auf einer Plattform bereitstellen, die HTTP2 unterstützt (z.B. Vercel).
• Bildelemente haben keine expliziten width- und height-Angaben: Dies ist tatsächlich ein Bug in Lighthouse und beeinflusst die Leistung der Website nicht.

Weiterführende Literatur

• Next.js: Dokumentation zu dynamischen Imports