3.8.2022 |

Next.js: Lazy Loading von dynamischen Inline-Imports

Next.js, das React-Framework von Vercel, bietet die Option, externe Bibliotheken zeitversetzt zu laden. Dies verbessert die Leistung, da der Webbrowser initial weniger JavaScript lädt.

Das Ganze nennt sich next/dynamic und ist eine Erweiterung zu React.lazy.

Hier ein Beispiel aus der Dokumentation:

// components/hello.js
export function Hello() {
  return <p>Hello!</p>
}

// pages/myPage.js
import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

Hier wird die Hello-Komponente dynamisch mit einem Promise geladen (.then((mod) => mod.Hello).

Dazu muss man wissen, dass Next.js dateien-basiertes Routing verwendet. Die Datei in pages/index.js erstellt folglich eine Seite, die man im Browser per URL /myPage ansteuern kann.

Diese Unterscheidung in eine Datei, welche eine Seite aufbaut und eine separate Datei, welche die eigentliche Logik enthält, ist manchmal nicht gewünscht.

Mit Promise.resolve kann man auch eine Komponente laden, die sich in der gleichen Datei befindet:

// pages/myPage.js
import dynamic from 'next/dynamic'

function Hello() {
  return <p>Hello!</p>
}

const DynamicComponent = dynamic(() =>
  Promise.resolve(Hello)
)

Quellen

Zur Übersicht

Mehr vom DevSquad...

Dennis Hundertmark

sayhello  👋

Dennis Hundertmark

Angular Unit Test - You're Testing Your Angular Code Wrong (Probably)