Was ist Modulepreload-Tag-Generator?
Modulepreload ist ein spezialisiertes Vorladen für ES-Modul-Skripte. Im Gegensatz zu standardmäßigem preload versteht modulepreload Modul-Abhängigkeitsgraphen. Es wird häufig in Vite- und Astro-Ausgaben verwendet. Es benötigt das korrekte crossorigin-Attribut für Cross-Origin-Module.
Kurze Antwort
Verwenden Sie modulepreload, um ES-Modul-Abhängigkeiten spekulativ abzurufen, zu parsen und zu kompilieren, bevor sie benötigt werden. Es funktioniert wie preload, ist aber speziell für JavaScript-Modul-Skripte konzipiert.
Last updated: 2026-05-25
Einschränkungen
- modulepreload ist nur für ES-Modul-Skripte (type='module') wirksam. Es gilt nicht für klassische Skripte.
- Die Browserunterstützung hinkt hinter standardmäßigem preload hinterher. Firefox hat Unterstützung in 115+, Safari in 17.2+ hinzugefügt.
- modulepreload ruft das Modul ab, führt es aber nicht aus. Die Ausführung erfolgt erst, wenn das Modul-Skript-Tag erreicht wird.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Geben Sie den Modul-Skriptpfad oder die URL ein.
- Wählen Sie, ob das Modul vom gleichen Ursprung oder Cross-Origin ist.
- Das Tool fügt das korrekte crossorigin-Attribut für den ausgewählten Ursprungstyp hinzu.
- Kopieren Sie das Tag in den Seitenkopf vor anderen Modul-Skripten.
Wofür du es nutzen kannst
- Fügen Sie modulepreload für ein Vite-gebautes JavaScript-Einstiegsmodul hinzu.
- Laden Sie ein gemeinsames ES-Modul-Chunk für schnellere Seitenübergänge vor.
- Optimieren Sie das Modulladen auf einer statischen Site, die mit Astro oder SvelteKit erstellt wurde.