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

Houssein Djirdeh

Die Entwicklung von Websites, die in allen gängigen Browsern gut funktionieren, ist ein zentraler Grundsatz eines offenen Web-Ökosystems. Das bedeutet jedoch zusätzlichen Aufwand, da Sie dafür sorgen müssen, dass der gesamte von Ihnen geschriebene Code in jedem Browser unterstützt wird, den Sie anvisieren. 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 neuere Syntax enthält, in Code, den verschiedene Browser und Umgebungen (z. B. Node) verstehen können. In diesem Leitfaden wird davon ausgegangen, dass Sie Babel verwenden. Wenn Sie Babel noch nicht in Ihre Anwendung eingebunden haben, müssen Sie der Einrichtungsanleitung folgen. Wählen Sie webpack in Build Systems aus, wenn Sie webpack als Modul-Bundler in Ihrer App verwenden.

Wenn Sie Babel verwenden möchten, um nur das zu transpilieren, was für Ihre Nutzer erforderlich ist, müssen Sie Folgendes tun:

1. Geben Sie an, auf welche Browser Sie die Ausrichtung vornehmen möchten.
2. Verwenden Sie @babel/preset-env mit den entsprechenden Browserzielen.
3. Verwenden Sie <script type="module">, um das Senden von transpiliertem Code an Browser zu beenden, die ihn nicht benötigen.

Browser für die Ausrichtung auswählen

Bevor Sie ändern, wie der Code in Ihrer Anwendung transpiliert wird, müssen Sie herausfinden, mit welchen Browsern auf Ihre Anwendung zugegriffen wird. Analysieren Sie, welche Browser Ihre Nutzer derzeit verwenden und auf welche Sie abzielen möchten, um eine fundierte Entscheidung zu treffen.

@babel/preset-env verwenden

Beim Transpilieren von Code entsteht in der Regel eine Datei, die größer ist als die ursprüngliche Datei. Wenn Sie die Menge der Kompilierung minimieren, können Sie die Größe Ihrer Bundles verringern und so die Leistung einer Webseite verbessern.

Anstatt bestimmte Plug-ins einzubinden, um bestimmte Sprachfunktionen, die Sie verwenden, selektiv zu kompilieren, bietet Babel eine Reihe von Voreinstellungen, die Plug-ins bündeln. Verwenden Sie @babel/preset-env, um nur die Transformationen und Polyfills einzuschließen, die für die Browser benötigt werden, die Sie als Zielgruppe ansprechen möchten.

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

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

Verwenden Sie das Feld targets, um anzugeben, welche Browserversionen Sie einbeziehen möchten. Fügen Sie dazu eine entsprechende Abfrage in das Feld browsers ein. @babel/preset-env wird in browserslist integriert, einer Open-Source-Konfiguration, die von verschiedenen Tools für das Targeting von Browsern verwendet wird. Eine vollständige Liste der kompatiblen Anfragen finden Sie in der browserslist-Dokumentation. Eine weitere Möglichkeit ist die Verwendung einer .browserslistrc-Datei, in der Sie die Umgebungen auflisten, auf die Sie die Ausrichtung vornehmen möchten.

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

In den meisten Fällen ist das besser als die folgende Konfiguration:

  "targets": "last 2 versions"

Der Wert "last 2 versions" transpilieren Ihren Code für die letzten beiden Versionen jedes Browsers. Das bedeutet, dass auch für nicht mehr unterstützte Browser wie Internet Explorer Support bereitgestellt wird. Dies kann die Größe Ihres Bundles unnötig erhöhen, wenn Sie nicht erwarten, dass diese Browser für den Zugriff auf Ihre Anwendung verwendet werden.

Letztendlich sollten Sie die geeignete Kombination von Abfragen auswählen, um nur Browser anzusprechen, die Ihren Anforderungen entsprechen.

Moderne Fehlerkorrekturen aktivieren

@babel/preset-env gruppiert mehrere JavaScript-Syntaxfunktionen in Sammlungen und aktiviert/deaktiviert sie basierend auf den angegebenen Zielbrowsern. Das funktioniert zwar gut, aber eine ganze Sammlung von Syntaxfunktionen wird transformiert, wenn ein Zielbrowser einen Fehler mit nur einer Funktion enthält. Das führt oft zu mehr transformiertem Code als nötig.

Die Option für Fehlerkorrekturen in @babel/preset-env wurde ursprünglich als separates Preset entwickelt und löst dieses Problem, indem sie moderne Syntax, die in einigen Browsern nicht funktioniert, in die nächstgelegene äquivalente Syntax konvertiert, die in diesen Browsern funktioniert. Das Ergebnis ist nahezu identischer moderner Code mit einigen kleinen Syntaxanpassungen, die die Kompatibilität in allen Zielbrowsern gewährleisten. Wenn Sie diese Optimierung verwenden möchten, muss @babel/preset-env 7.10 oder höher installiert sein. Legen Sie dann das Attribut 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 von allen wichtigen Browsern unterstützt wird. Sie können Module verwenden, um Skripts zu erstellen, die aus anderen Modulen importieren und in andere Module exportieren können. Sie können sie aber auch mit @babel/preset-env verwenden, um nur Browser anzusprechen, die sie unterstützen.

Anstatt nach bestimmten Browserversionen oder Marktanteilen zu suchen, sollten 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 wird der Prozess vereinfacht, dafür zu sorgen, dass nur transpilierten Code für Browser verwendet wird, die ihn tatsächlich benötigen.

Browser, die Module unterstützen, ignorieren Skripts mit einem nomodule-Attribut. Browser, die keine Module unterstützen, ignorieren Skriptelemente mit type="module". Das bedeutet, dass Sie sowohl ein Modul als auch eine kompilierte Alternative einfügen können.

Idealerweise werden die beiden Versionsskripts einer Anwendung so eingebunden:

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

Browser, die Module unterstützen, rufen main.mjs ab und führen es aus. compiled.js wird ignoriert. In Browsern, die keine Module unterstützen, ist es genau umgekehrt.

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

• Eine Version nur für Browser, die Module unterstützen.
• Eine Version mit einem kompilierten Skript, das in allen Legacy-Browsern funktioniert. Die Datei ist größer, da die Transpilierung eine größere Bandbreite an Browsern unterstützen muss.

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