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

Houssein Djirdeh

Das Erstellen von Websites, die mit allen gängigen Browsern funktionieren, ist ein Grundprinzip einer offenen Webumgebung. Dies bedeutet jedoch zusätzlichen Aufwand, um sicherzustellen, dass der gesamte von Ihnen geschriebene Code in jedem Browser unterstützt wird, auf den Sie abzielen. Wenn Sie neue JavaScript-Sprachfunktionen verwenden möchten, müssen Sie diese in abwärtskompatible Formate für Browser transpilieren, die sie noch nicht unterstützen.

Babel ist das am weitesten verbreitete Tool, um Code mit neuerer Syntax in Code zu kompilieren, den verschiedene Browser und Umgebungen (wie Node.de) verstehen können. In diesem Leitfaden wird davon ausgegangen, dass Sie Babel verwenden. Daher müssen Sie die Einrichtungsanleitung befolgen, um Babel in Ihre Anwendung einzubinden, falls Sie dies noch nicht getan haben. Wählen Sie webpack in Build Systems aus, wenn Sie Webpack als Modul-Bundler in Ihrer App verwenden.

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

1. Legen Sie fest, welche Browser Sie für die Ausrichtung verwenden möchten.
2. Verwenden Sie @babel/preset-env mit geeigneten Browserzielen.
3. Verwenden Sie <script type="module">, um zu verhindern, dass transpilierten Code an Browser gesendet wird, die ihn nicht benötigen.

Gewünschte Browser für die Ausrichtung auswählen

Bevor Sie ändern, wie der Code in Ihrer Anwendung transpiliert wird, müssen Sie ermitteln, welche Browser auf die Anwendung zugreifen. Analysieren Sie, welche Browser Ihre Nutzer derzeit verwenden und welche, auf die Sie abzielen, um eine fundierte Entscheidung zu treffen.

@babel/preset-env verwenden

Das Transpilieren von Code führt in der Regel zu einer Datei, die größer ist als ihre ursprünglichen Formulare. Wenn Sie den Umfang der Kompilierung minimieren, können Sie auch die Größe der Bundles reduzieren und so die Leistung einer Webseite verbessern.

Anstelle bestimmter Plug-ins, um bestimmte 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 einzufügen, die für die Browser erforderlich sind, die Sie ansprechen möchten.

Fügen Sie @babel/preset-env innerhalb des presets-Arrays in der Babel-Konfigurationsdatei .babelrc ein:

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

Geben Sie im Feld targets an, welche Browserversionen einbezogen werden sollen. Fügen Sie dazu eine entsprechende Abfrage in das Feld browsers ein. @babel/preset-env lässt sich in die Browserlist integrieren, eine Open-Source-Konfiguration, die von verschiedenen Tools für das Targeting auf Browser gemeinsam verwendet wird. Eine vollständige Liste kompatibler Abfragen finden Sie in der Browserlist-Dokumentation. Eine weitere Möglichkeit ist die Verwendung einer .browserslistrc-Datei, um die Umgebungen aufzulisten, die Sie als Ziel verwenden möchten.

Der Wert ">0.25%" weist Babel an, nur die Transformationen zu berücksichtigen, die zur Unterstützung von Browsern erforderlich sind, die mehr als 0,25% der globalen Nutzung ausmachen. Dadurch wird sichergestellt, dass Ihr Bundle keinen unnötigen transpilierten Code für Browser enthält, die von einer sehr kleinen Gruppe von Nutzern verwendet werden.

In den meisten Fällen ist dies ein besserer Ansatz als die folgende Konfiguration:

  "targets": "last 2 versions"

Mit dem Wert "last 2 versions" wird der Code für die letzten beiden Versionen jedes Browsers transpiliert. Das bedeutet, dass auch nicht mehr unterstützte Browser wie Internet Explorer unterstützt werden. 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 fasst mehrere JavaScript-Syntaxfunktionen in Sammlungen zusammen und aktiviert bzw. deaktiviert sie je nach den angegebenen Zielbrowsern. Dies funktioniert zwar gut, aber wenn in einem Zielbrowser nur ein Fehler auftritt, wird eine ganze Reihe von Syntaxfunktionen umgewandelt. Dies führt häufig zu mehr transformiertem Code als nötig.

Die Fehlerkorrekturen-Option in @babel/preset-env wurde ursprünglich als separate Voreinstellung entwickelt und behebt dieses Problem. Sie löst dieses Problem, indem die moderne Syntax, die in einigen Browsern fehlerhaft ist, in die nächste äquivalente Syntax, die in diesen Browsern nicht fehlerhaft ist, konvertiert wird. Das Ergebnis ist nahezu identischer moderner Code mit ein paar kleinen Syntaxanpassungen, die Kompatibilität in allen Zielbrowsern garantieren. Damit Sie diese Optimierung verwenden können, 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 (ES-Module) sind eine relativ neue Funktion, die in allen gängigen Browsern unterstützt wird. Mit 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 Browser anzusteuern, die sie unterstützen.

Statt nach bestimmten Browserversionen oder Marktanteilen zu suchen, können Sie "esmodules" : true im Feld targets Ihrer .babelrc-Datei angeben.

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

Viele neuere mit Babel kompilierte ECMAScript-Funktionen werden bereits in Umgebungen unterstützt, die JavaScript-Module unterstützen. Dadurch wird sichergestellt, dass nur transpiliertes 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, hingegen ignorieren Skriptelemente mit type="module". Das bedeutet, dass Sie ein Modul sowie ein kompiliertes Fallback einschließen können.

Idealerweise sind die beiden Versionsskripts einer Anwendung wie folgt eingefügt:

  <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 sie aus und ignorieren compiled.js. Bei Browsern, die keine Module unterstützen, geschieht das umgekehrt.

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

• Eine Version nur für Browser, die Module unterstützen.
• Version mit einem kompilierten Skript, das in jedem älteren Browser funktioniert. Die Datei ist größer, da die Transpilation eine größere Anzahl von Browsern unterstützen muss.

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