Ressourcenhinweise: modulepreload
Laden Sie ES-Module vorab, damit JavaScript schneller startet
Ressourcenhinweise: modulepreload ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.
Warum es modulepreload gibt
ES-Module bilden einen Abhängigkeitsgraphen: Ein Einstiegsmodul importiert weitere Module, die wiederum weitere importieren. Ohne Unterstützung wird jede Ebene des Baums erst entdeckt, nachdem die vorherige Ebene geparst wurde – dadurch entsteht ein sequenzieller Waterfall, der die Ladeleistung massiv beeinträchtigt.
Was modulepreload bewirkt
<link rel="modulepreload" href="/app.js"> weist den Browser an, das Modul UND alle transitiv importierten Module sofort parallel abzurufen. Wenn das <script type="module"> ausgeführt wird, befindet sich bereits der gesamte Graph im Cache.
Im Vergleich zu preload
preload ruft Dateien ebenfalls parallel ab, kennt jedoch keine Importanweisungen – das Vorladen einer Moduldatei lädt ihre Abhängigkeiten nicht vor. modulepreload folgt Importen automatisch; genau das ist sein Zweck.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Wo Sie es platzieren sollten
Im <head>, so früh wie möglich. Der Browser startet die Preload-Anfrage sofort und setzt das Parsen des HTML fort. Wenn später im Dokument das passende <script type="module"> erreicht wird, befindet sich die Datei bereits im Speicher.
Entdeckung und Durchlaufen des Graphen
Der Browser parst das vorgeladene Modul auf der Suche nach Importanweisungen und ruft anschließend rekursiv für jede importierte URL parallel die entsprechende Datei ab. Pro Ebene fällt die Latenz eines Roundtrips an, innerhalb jeder Ebene entsteht jedoch Parallelität, wodurch sich der kritische Pfad drastisch verkürzt.
Mit Bundlern verwenden
Moderne Bundler (Vite, Rollup, Webpack 5+) erzeugen automatisch modulepreload-Tags für durch Code-Splitting aufgeteilte Chunks. In selbst entwickelten Anwendungen sollten Sie sie beim Build aus dem Importgraphen erzeugen, damit die Liste beim Hinzufügen oder Entfernen von Modulen korrekt bleibt.
Überlegungen zu Cross-Origin
Fügen Sie bei Cross-Origin-Modul-Preloads crossorigin="anonymous" ein. Dadurch entspricht der Abrufmodus dem Standard von <script type="module">, sodass die vorgeladene Kopie wiederverwendet wird, anstatt ohne CORS-Header erneut abgerufen zu werden.
Browserunterstützung
modulepreload wird von Chrome/Edge/Safari und aktuellen Firefox-Versionen unterstützt. In älteren Firefox-Versionen wird es stillschweigend ignoriert – Module funktionieren weiterhin, jedoch ohne den Vorteil des Preloads. Ein Polyfill ist nicht erforderlich; im ungünstigsten Fall ist das Laden in veralteten Browsern etwas langsamer.
Die Größe des Graphen begrenzen
Das Vorladen von Hunderten von Modulen verschwendet Bandbreite für Code, den die Nutzer möglicherweise nie ausführen. Laden Sie nur die Einstiegs-Chunks der jeweiligen Route vor, nicht tief verschachtelte Lazy-Loaded-Module. Verwenden Sie für selten genutzte Codepfade prefetch oder einen bedarfsgesteuerten Import.
Mit anderen Hinweisen kombinieren
Für Bilder und Schriftarten im selben head können Sie die Hinweise frei kombinieren: preconnect für CDNs von Drittanbietern, preload für kritische Schriftarten, modulepreload für Einstiegsmodule und prefetch für Ressourcen der nächsten Seite. Die Hinweise stören sich nicht gegenseitig.
Überprüfung
Prüfen Sie den Network-Bereich: Mit modulepreload erscheinen die Importe der zweiten Ebene als parallele Anfragen, die fast gleichzeitig mit dem Einstieg beginnen. Ohne modulepreload erscheinen sie gestaffelt; jede Anfrage startet erst, nachdem das übergeordnete Modul vollständig geparst wurde.
Wissenscheck
Was bewirkt modulepreload, das ein gewöhnlicher preload derselben Moduldatei nicht bewirkt?
Zusammenfassung
modulepreload beseitigt den ES-Modul-Waterfall, indem es das Einstiegsmodul und seine Importe vor der Ausführung parallel abruft. Platzieren Sie es früh im <head>, erzeugen Sie es aus dem Build-Graphen, setzen Sie bei Cross-Origin-Modulen crossorigin und beschränken Sie seinen Umfang auf die Einstiegspunkte der Routen, um Bandbreite nicht zu verschwenden.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 40
- Lektionen
- 159
Häufig gestellte Fragen
Ist die Lektion „Ressourcenhinweise: modulepreload“ kostenlos?
Ja — der vollständige Text von „Ressourcenhinweise: modulepreload“ 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 „Ressourcenhinweise: modulepreload“?
Laden Sie ES-Module vorab, damit JavaScript schneller startet 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 4 von 4.
Wie lange dauert die Lektion „Ressourcenhinweise: modulepreload“?
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
- Die Attribute async und defer
- Preload Prefetch und Preconnect
- Lazy Loading für Bilder: loading=lazy
- Ressourcenhinweise: modulepreload