Modernen Code in modernen Browsern bereitstellen, um die Ladezeiten zu verkürzen

Houssein Djirdeh

Websites zu erstellen, die in allen gängigen Browsern gut funktionieren, ist ein Grundsatz des offenen Web-Ökosystems. Das bedeutet jedoch zusätzliche Arbeit, da Sie dafür sorgen müssen, dass der gesamte von Ihnen geschriebene Code in allen Browsern unterstützt wird, auf die Sie Ihre Anzeigen ausrichten möchten. Wenn Sie neue JavaScript-Sprachfunktionen verwenden möchten, müssen Sie diese Funktionen in abwärtskompatible Formate für Browser transpilieren, die sie noch nicht unterstützen.

Babel ist das am häufigsten verwendete Tool zum Kompilieren von Code, der eine neuere Syntax enthält, in Code, der von verschiedenen Browsern und Umgebungen (z. B. Node) verstanden werden kann. In diesem Leitfaden wird davon ausgegangen, dass Sie Babel verwenden. Folgen Sie daher der Einrichtungsanleitung, um es in Ihre Anwendung einzubinden, falls Sie das noch nicht getan haben. Wählen Sie webpack in Build Systems aus, wenn Sie webpack als Modul-Bundler in Ihrer App verwenden.

Damit Babel nur das transpiliert, was für Ihre Nutzer erforderlich ist, müssen Sie Folgendes tun:

  1. Legen Sie fest, auf welche Browser Sie Ihre Anzeigen ausrichten möchten.
  2. Verwenden Sie @babel/preset-env mit geeigneten Browserzielen.
  3. Mit <script type="module"> können Sie verhindern, dass transpilierter Code an Browser gesendet wird, die ihn nicht benötigen.

Browser für die Ausrichtung auswählen

Bevor Sie die Transpilierung des Codes in Ihrer Anwendung ändern, müssen Sie ermitteln, welche Browser auf Ihre Anwendung zugreifen. Analysieren Sie, welche Browser Ihre Nutzer derzeit verwenden, und welche Sie als Ausrichtung planen, um fundierte Entscheidungen zu treffen.

@babel/preset-env verwenden

Das Transpilieren von Code führt in der Regel zu einer Datei, die größer ist als die ursprünglichen Dateien. Wenn Sie die Anzahl der Kompilierungen minimieren, können Sie die Größe Ihrer Bundles reduzieren, um die Leistung einer Webseite zu verbessern.

Anstatt bestimmte Plug-ins einzubinden, um bestimmte von Ihnen verwendete Sprachfunktionen selektiv zu kompilieren, bietet Babel eine Reihe von Voreinstellungen, in denen Plug-ins gebündelt sind. Verwenden Sie @babel/preset-env, um nur die Transformationen und Polyfills einzubeziehen, die für die Browser erforderlich sind, auf die Sie Ihre Website ausrichten möchten.

Fügen Sie @babel/preset-env in der Babel-Konfigurationsdatei .babelrc in das presets-Array ein:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
}

Geben Sie im Feld targets an, welche Browserversionen Sie einbeziehen möchten, indem Sie dem Feld browsers eine entsprechende Abfrage hinzufügen. @babel/preset-env lässt sich in browserslist einbinden, einer Open-Source-Konfiguration, die von verschiedenen Tools für das Browser-Targeting verwendet wird. Eine vollständige Liste der kompatiblen Abfragen finden Sie in der Browserlist-Dokumentation. Alternativ können Sie eine .browserslistrc-Datei verwenden, um die Umgebungen aufzulisten, auf die Sie Ihre Anzeigen ausrichten möchten.

Der Wert ">0.25%" weist Babel an, nur die Transformationen einzubeziehen, die für die Unterstützung von Browsern erforderlich sind, die mehr als 0,25% der weltweiten Nutzung ausmachen. So wird sichergestellt, dass Ihr Bundle keinen unnötigen transpilierten Code für Browser enthält, die von einem sehr kleinen Prozentsatz der Nutzer verwendet werden.

In den meisten Fällen ist dies eine bessere Lösung als die folgende Konfiguration:

  "targets": "last 2 versions"

Mit dem Wert "last 2 versions" wird Ihr Code für die zwei letzten Versionen jedes Browsers transpiliert. Das bedeutet, dass auch eingestellte Browser wie Internet Explorer unterstützt werden. Dies kann die Größe Ihres Bundles unnötig erhöhen, wenn Sie nicht davon ausgehen, dass diese Browser zum Zugriff auf Ihre Anwendung verwendet werden.

Sie sollten die richtige Kombination von Suchanfragen auswählen, um nur auf Browser auszurichten, die Ihren Anforderungen entsprechen.

Moderne Fehlerkorrekturen aktivieren

@babel/preset-env gruppiert mehrere JavaScript-Syntaxfunktionen in Sammlungen und aktiviert oder deaktiviert sie je nach den angegebenen Zielbrowsern. Das funktioniert zwar gut, aber eine ganze Reihe von Syntaxfunktionen wird umgewandelt, wenn ein anvisierter Browser einen Fehler in nur einer einzelnen Funktion enthält. Dies führt oft zu mehr transformiertem Code als nötig.

Die Option „Fehlerkorrekturen“ in @babel/preset-env wurde ursprünglich als separates Preset entwickelt. Sie löst dieses Problem, indem moderne Syntax, die in einigen Browsern nicht funktioniert, in die nächstgelegene äquivalente Syntax umgewandelt wird, die in diesen Browsern funktioniert. Das Ergebnis ist fast identischer moderner Code mit einigen kleinen Syntaxänderungen, die die Kompatibilität in allen Zielbrowsern gewährleisten. Wenn Sie diese Optimierung verwenden möchten, müssen Sie @babel/preset-env 7.10 oder höher installiert haben. Legen Sie dann die Eigenschaft bugfixes auf true fest:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
}

In Babel 8 ist die Option bugfixes standardmäßig aktiviert.

„<script type="module">“ verwenden

JavaScript-Module oder ES-Module sind eine relativ neue Funktion, die in allen gängigen Browsern unterstützt wird. Mithilfe von Modulen können Sie Scripts erstellen, die aus anderen Modulen importiert und exportiert werden können. Sie können sie aber auch mit @babel/preset-env verwenden, um nur auf Browser auszurichten, die sie unterstützen.

Anstatt nach bestimmten Browserversionen oder dem Marktanteil zu fragen, können Sie "esmodules" : true im Feld targets Ihrer .babelrc-Datei angeben.

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
}

Viele neuere ECMAScript-Funktionen, die mit Babel kompiliert wurden, werden bereits in Umgebungen unterstützt, die JavaScript-Module unterstützen. So können Sie einfacher dafür sorgen, dass nur transpilierter Code für Browser verwendet wird, die ihn tatsächlich benötigen.

In Browsern, die Module unterstützen, werden Scripts mit dem Attribut nomodule ignoriert. Browser, die Module nicht unterstützen, ignorieren hingegen Scriptelemente mit type="module". Sie können also ein Modul sowie einen kompilierten Fallback einschließen.

Idealerweise sind die beiden Versionsscripts einer Anwendung so enthalten:

  <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script>

In Browsern, die Module unterstützen, wird main.mjs abgerufen und ausgeführt und compiled.js ignoriert. In Browsern, die keine Module unterstützen, ist das Gegenteil der Fall.

Wenn Sie webpack verwenden, können Sie in Ihren Konfigurationen unterschiedliche Ziele für zwei separate Versionen Ihrer Anwendung festlegen:

  • Eine Version nur für Browser, die Module unterstützen.
  • Eine Version mit einem kompilierten Script, das in allen älteren Browsern funktioniert. Dies hat eine größere Dateigröße zur Folge, da die Transpilierung eine größere Bandbreite von Browsern unterstützen muss.

Mit Dank an Connor Clark und Jason Miller für ihre Rezensionen.