Dynamischer Import mit import() in Modulen
Laden Sie Module bei Bedarf mit dem dynamischen import()
Dynamischer Import mit import() in Modulen ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Der Ausdruck import()
Anders als die statische import-Deklaration ist import("./module.js") ein Ausdruck, der ein Promise zurückgibt, das in den Modul-Namensraum aufgelöst wird. Er funktioniert überall – innerhalb von Funktionen und Bedingungen, sogar in Nicht-Modul-Skripten.
Code-Splitting
Dynamic Import ist der wichtigste Mechanismus für Code-Splitting. Ein Routen-Handler kann das Laden des Routencodes auf den Zeitpunkt verschieben, an dem der Benutzer navigiert: const mod = await import("./routes/admin.js"). Die Bytes der Route werden erst heruntergeladen, wenn sie benötigt werden.
document.getElementById("settings-btn").addEventListener("click", async () => {
const { renderSettings } = await import("./settings.js");
renderSettings();
});Der zurückgegebene Modul-Namensraum
Der aufgelöste Wert ist der Modul-Namensraum – ein Objekt, dessen Eigenschaften die Exporte des Moduls sind. Benannte Exporte können Sie direkt destrukturieren oder den Default-Export als module.default aufrufen.
Fehler abfangen
Da import() ein Promise zurückgibt, werden Fehler durch einen fehlgeschlagenen Abruf oder Syntaxfehler an .catch() weitergegeben. Umschließen Sie dynamische Imports in asynchronen Funktionen mit try/catch oder verwenden Sie .catch(), um Netzwerkfehler ordnungsgemäß zu behandeln.
try {
const mod = await import("./optional.js");
mod.run();
} catch (e) {
console.warn("Optional module failed", e);
}Bedingtes Laden
Laden Sie Polyfills nur in älteren Browsern: if (!window.IntersectionObserver) await import("intersection-observer-polyfill"). Moderne Browser laden diese Bytes überhaupt nicht; ältere Browser tragen die Kosten nur, wenn das Polyfill benötigt wird.
Auflösung von Specifiern
Der Specifier folgt denselben Regeln wie ein statischer Import: relative URLs, absolute URLs oder über eine Import Map zugeordnete nicht aufgelöste Namen. Dynamische Zeichenfolgen funktionieren ebenfalls: import(`./locales/${lang}.js`), wobei Bundler damit möglicherweise Schwierigkeiten beim Code-Splitting haben.
Caching
Jeder eindeutige Specifier wird in dieselbe Modulinstanz aufgelöst. Der zweite Aufruf von import("./mod.js") gibt das bereits geladene Modul ohne erneuten Netzwerkabruf zurück. Dadurch kann Dynamic Import sicher in Event-Handlern verwendet werden, ohne wiederholte Downloads befürchten zu müssen.
Dynamischer Import auf der obersten Ebene
Innerhalb eines Moduls können Sie Top-Level-Await zusammen mit Dynamic Import verwenden, um die Ausführung zu verzögern, bis ein asynchron geladenes Hilfsmodul verfügbar ist. Das ist für Plugin-Systeme nützlich, bei denen die Plugin-Liste erst zur Laufzeit bekannt ist.
// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();Verwendung mit React.lazy und Preact
React.lazy, Preacts `lazy` aus preact/compat und Vues defineAsyncComponent kapseln Dynamic Import für Code-Splitting auf Komponentenebene. Die primitive Funktion des Browsers ist import(); Frameworks ergänzen darauf aufbauend Ladegrenzen ähnlich wie bei Suspense.
Splitting mit Webpack und Vite
Bundler erkennen import("...") im Quellcode und erzeugen für das importierte Modul einen separaten Chunk. Das Runtime-Stück lädt den Chunk beim ersten Aufruf. Sie schreiben als Autor ES-Spec-import(); der Bundler erzeugt daraus die notwendige Netzwerkabfolge.
Häufiger Fehler
Wenn Sie import("X") in einem häufig ausgeführten Pfad aufrufen (etwa innerhalb einer Render-Schleife), wird der Cache bei jedem Aufruf erneut geprüft. Obwohl kein erneuter Download stattfindet, verursacht die Suche einen gewissen Aufwand. Speichern Sie den aufgelösten Namensraum nach dem ersten Import in einer Variablen.
Wissenscheck
Was gibt import("./mod.js") zurück?
Zusammenfassung
Dynamic Import() ist das Gegenstück zum statischen Import für das Laden nach Bedarf. Es gibt ein Promise zurück, das in den Modul-Namensraum aufgelöst wird, und ermöglicht dadurch Code-Splitting, bedingte Polyfills und Plugin-Systeme. Module werden nach dem ersten Import gecacht, sodass nachfolgende Aufrufe keinen zusätzlichen Ladevorgang verursachen. Bundler erzeugen für jeden Dynamic-Import-Aufruf separate Chunks.
Häufig gestellte Fragen
Ist die Lektion „Dynamischer Import mit import() in Modulen“ kostenlos?
Ja — der vollständige Text von „Dynamischer Import mit import() in Modulen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Dynamischer Import mit import() in Modulen“?
Laden Sie Module bei Bedarf mit dem dynamischen import() Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Dynamischer Import mit import() in Modulen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- ES-Modul-Skripte: type=module
- Import Maps: importmap
- Dynamischer Import mit import() in Modulen
- Grundlagen der Module Federation