Die modulbasierte Entwicklung bietet einige echte Vorteile in Bezug auf Cache-Fähigkeit, So können Sie die Anzahl der Bytes reduzieren, die Sie an Ihre Nutzer senden müssen. Der feine Detaillierungsgrad des Codes hilft auch beim Laden. den kritischen Code in Ihrer Anwendung zu priorisieren.
Modulabhängigkeiten führen jedoch zu Ladeproblemen, da der Browser ob ein Modul geladen ist, bevor es ermittelt, welche Abhängigkeiten bestehen. Nur Hinflug die Abhängigkeiten vorab zu laden, sodass der Browser damit die Verbindung nicht unterbrochen wird.
<link rel="preload">
<link rel="preload">
können Ressourcen im Voraus deklarativ angefordert
bevor der Browser sie benötigt.
<head>
<link rel="preload" as="style" href="critical-styles.css">
<link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">
</head>
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Dies funktioniert besonders gut mit Ressourcen wie Schriftarten, die oft in CSS-Dateien, manchmal auch mit mehreren Ebenen. In diesem Fall hat der Browser mehrere Roundtrips warten müssen, bevor sie herausfindet, Große Schriftartdatei abrufen, in der der Download in der Zwischenzeit möglich gewesen wäre und nutzen Sie die volle Verbindungsbandbreite.
<link rel="preload">
und sein HTTP-Header-Äquivalent bieten eine einfache, deklarative
Möglichkeit, den Browser sofort über wichtige Dateien zu informieren, die benötigt werden
als Teil der aktuellen Navigation. Wenn der Browser das Vorabladen erkennt, startet er ein hohes
priorisierten Download für die Ressource, sodass sie entweder nur noch
oder teilweise abgerufen wurden. Dies funktioniert jedoch nicht für Module.
Warum funktioniert <link rel="preload">
nicht für Module?
Hier wird es knifflig. Es gibt verschiedene Anmeldedaten-Modi für und um einen Cache-Treffer zu erhalten, müssen sie übereinstimmen. Andernfalls Abrufen der Ressource zweimal Natürlich ist ein Doppelabruf schlecht, vergeudet die Bandbreite der Nutzenden und lässt sie ohne guten Grund länger warten.
Für <script>
- und <link>
-Tags können Sie den Anmeldedatenmodus mit der crossorigin
festlegen
. Es stellt sich jedoch heraus, dass ein <script type="module">
ohne
Das Attribut crossorigin
gibt den Anmeldedatenmodus omit
an, der nicht vorhanden ist
für <link rel="preload">
. Das bedeutet, dass Sie
Ändern Sie das crossorigin
-Attribut in <script>
und <link>
in einen Wert
und es ist vielleicht nicht so einfach, dies zu tun,
der Vorabladen ist eine Abhängigkeit
von anderen Modulen.
Darüber hinaus ist das Abrufen der Datei nur der erste Schritt zur Ausführung des Codes.
Zuerst muss der Browser ihn parsen und kompilieren. Idealerweise
Dies sollte auch im Voraus geschehen.
Wenn das Modul benötigt wird,
und kann ausgeführt werden. V8 (die JavaScript-Engine von Chrome) parst und kompiliert jedoch Module.
anders als bei anderem JavaScript. <link rel="preload">
nicht
eine beliebige Möglichkeit angeben, dass die zu ladende Datei ein Modul ist, sodass alle Browser
laden Sie die Datei und legen Sie sie in den Cache ab. Sobald das Skript mit einem
<script type="module">
-Tag (oder es wird von einem anderen Modul geladen), parst der Browser
und kompiliert den Code als JavaScript-Modul.
Ist <link rel="modulepreload">
also nur <link rel="preload">
für Module?
Kurz gesagt: ja. Mit einem bestimmten link
-Typ zum Vorabladen von Modulen
einfachen HTML-Code schreiben, ohne sich Gedanken
über den Anmeldemodus machen zu müssen. Die
funktionieren die Standardeinstellungen einfach.
<head>
<link rel="modulepreload" href="super-critical-stuff.mjs">
</head>
[...]
<script type="module" src="super-critical-stuff.mjs">
Und da der Browser weiß, dass es sich bei dem Vorabladen um ein Modul handelt, kann es intelligent sein, und das Modul parsen und kompilieren, sobald der Abruf abgeschlossen ist, anstatt zu warten, bis sie ausgeführt werden soll.
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Aber was ist mit den Modulen Abhängigkeiten?
Komisch, dass du fragen solltest! Es gibt tatsächlich etwas, das in diesem Artikel noch nicht behandelt wurde: die Rekursion.
Die Spezifikation <link rel="modulepreload">
ermöglicht das optionale Laden nicht nur
das angeforderte Modul, aber auch die gesamte Abhängigkeitsstruktur. Das ist für den Browser
tun dies, aber sie können es.
Was wäre also die beste browserübergreifende Lösung zum Vorabladen eines Moduls und seiner Abhängigkeitsstruktur, da Sie die vollständige Abhängigkeitsstruktur benötigen, um die Anwendung auszuführen?
Browser, die Abhängigkeiten rekursiv vorab laden, sollten eine robuste Deduplizierung haben von Modulen besteht. Daher empfiehlt es sich im Allgemeinen, das Modul und die einfache Liste Abhängigkeiten und den Browser darauf, dass er dasselbe Modul nicht zweimal abruft.
<head>
<!-- dog.js imports dog-head.js, which in turn imports
dog-head-mouth.js, which imports dog-head-mouth-tongue.js. -->
<link rel="modulepreload" href="dog-head-mouth-tongue.mjs">
<link rel="modulepreload" href="dog-head-mouth.mjs">
<link rel="modulepreload" href="dog-head.mjs">
<link rel="modulepreload" href="dog.mjs">
</head>
Wirkt sich das Vorabladen von Modulen auf die Leistung aus?
Durch Vorabladen wird dem Browser mitgeteilt, damit es auf lange Sichten abgerufen werden muss. Wenn Sie mit Modulen experimentieren und Leistungsprobleme aufgrund ist die Erstellung einer einfachen Liste von Vorabladevorgängen definitiv hilfreich.
Die Modulleistung ist jedoch noch nicht ausgereift. sehen Sie sich mit den Entwicklertools genau an, was in Ihrer Anwendung passiert, erwägen Sie, Ihre Anwendung in der Zwischenzeit in mehrere Blöcke zu bündeln. Es gibt viele die fortlaufende Modularbeiten in Chrome laufen. Bündeln ihre wohlverdiente Pause!