HTML-Attributwert rel="modulepreload"
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2023 browserübergreifend verfügbar.
Das Schlüsselwort modulepreload für das Attribut rel des Elements <link> bietet eine deklarative Möglichkeit, ein Modulskript vorab abzurufen, zu parsen und zu komilieren und es für die spätere Ausführung in der Modulzuordnung des Dokuments zu speichern.
Durch das Vorabladen können Module und ihre Abhängigkeiten frühzeitig heruntergeladen werden. Das kann auch die gesamte Download- und Verarbeitungszeit erheblich verkürzen. Denn so können Seiten Module parallel abrufen, statt sie nacheinander abzurufen, während jedes Modul verarbeitet und seine Abhängigkeiten ermittelt werden. Beachten Sie jedoch, dass Sie nicht einfach alles vorabladen können! Welche Ressourcen Sie vorabladen, müssen Sie gegen andere Vorgänge abwägen, denen dadurch möglicherweise Ressourcen fehlen, was die Benutzererfahrung beeinträchtigen kann.
Links mit rel="modulepreload" ähneln Links mit rel="preload".
Der Hauptunterschied besteht darin, dass preload die Datei lediglich herunterlädt und im Cache speichert. modulepreload dagegen ruft das Modul ab, parst und kompiliert es und legt die Ergebnisse in der Modulzuordnung ab, sodass es zur Ausführung bereit ist.
Bei Verwendung von modulepreload ist der Modus der Abrufanfrage immer cors. Die Eigenschaft crossorigin bestimmt den Anmeldedatenmodus der Anfrage.
Wenn crossorigin auf anonymous oder "" (Standardwert) gesetzt ist, lautet der Anmeldedatenmodus same-origin. Anmeldedaten wie Cookies und Authentifizierungsinformationen werden dann nur bei Anfragen mit same-origin gesendet.
Wenn crossorigin auf use-credentials gesetzt ist, lautet der Anmeldedatenmodus include. Anmeldedaten werden dann sowohl bei Anfragen an denselben Ursprung als auch bei ursprungsübergreifenden Anfragen gesendet.
Das Attribut as ist für Links mit rel="modulepreload" optional und hat standardmäßig den Wert "script".
Es kann auf "script", "style", "json", "text" oder ein beliebiges skriptähnliches Ziel wie "audioworklet", "paintworklet", "serviceworker", "sharedworker" oder "worker" gesetzt werden. Die vollständige Liste der zulässigen Werte ist in der Zuordnung für module preload destination der HTML-Spezifikation definiert. Die Liste der skriptähnlichen Ziele finden Sie in der Fetch-Spezifikation.
Wird ein anderes Ziel verwendet, wird auf dem Element ein Event namens „error“ ausgelöst.
Ein Browser kann zusätzlich entscheiden, Abhängigkeiten der Modulressource automatisch abzurufen.
Beachten Sie jedoch, dass dies eine browserspezifische Optimierung ist – nur wenn Sie jede Abhängigkeit einzeln angeben, stellen Sie sicher, dass alle Browser versuchen, die Abhängigkeiten eines Moduls vorab zu laden!
Außerdem werden die Events load oder error unmittelbar nach dem erfolgreichen beziehungsweise fehlgeschlagenen Laden der angegebenen Ressourcen ausgelöst.
Werden Abhängigkeiten automatisch abgerufen, werden im Hauptthread keine weiteren Events ausgelöst. Zusätzliche Anfragen können Sie allerdings gegebenenfalls in einem Service Worker oder auf dem Server überwachen.
Beispiele
Betrachten Sie das Beispiel basic-modules (Live-Version), das im Leitfaden zu JavaScript-Modulen vorgestellt wird.
Es hat die unten gezeigte Dateistruktur. Das Modul main.js auf oberster Ebene importiert mithilfe der import-Anweisung statisch die beiden abhängigen Module modules/canvas.js und modules/square.js.
index.html
main.js
modules/
canvas.js
square.js
Der HTML-Code des folgenden Beispiels zeigt, wie main.js über ein <script>-Element abgerufen wird.
Erst nachdem main.js geladen wurde, erkennt der Browser die beiden abhängigen Module und ruft sie ab.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Basic JavaScript module example</title>
<script type="module" src="main.js"></script>
</head>
<body></body>
</html>
Der folgende HTML-Code erweitert das Beispiel um <link>-Elemente mit rel="modulepreload" für die Hauptdatei und jedes der abhängigen Module.
Das ist deutlich schneller, weil das Herunterladen aller drei Module asynchron und parallel beginnt, bevor sie benötigt werden.
Wenn main.js geparst wurde und seine Abhängigkeiten bekannt sind, wurden diese bereits abgerufen und heruntergeladen.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Basic JavaScript module example</title>
<link rel="modulepreload" href="main.js" />
<link rel="modulepreload" href="modules/canvas.js" />
<link rel="modulepreload" href="modules/square.js" />
<script type="module" src="main.js"></script>
</head>
<body></body>
</html>
Spezifikationen
| Spezifikation |
|---|
| HTML # link-type-modulepreload |
Browser-Kompatibilität
Siehe auch
- Spekulatives Laden für einen Vergleich von
<link rel="modulepreload">mit anderen ähnlichen Funktionen zur Leistungsverbesserung. - Module vorab laden auf web.dev