Module vorab laden

Sérgio Gomes
X

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"> 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

  • Chrome: 50. <ph type="x-smartling-placeholder">
  • Rand: ≤ 79. <ph type="x-smartling-placeholder">
  • Firefox: 85 <ph type="x-smartling-placeholder">
  • Safari: 11.1 <ph type="x-smartling-placeholder">

Quelle

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.

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.

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

  • Chrome: 66 <ph type="x-smartling-placeholder">
  • Rand: ≤ 79. <ph type="x-smartling-placeholder">
  • Firefox: 115 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Quelle

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!