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

Houssein Djirdeh

Das Erstellen von Websites, die mit allen gängigen Browsern kompatibel sind, ist eines der Grundprinzipien offenen Web-Ökosystem. Dies bedeutet jedoch zusätzliche Arbeit, um sicherzustellen, wird der von Ihnen geschriebene Code in jedem Browser unterstützt, auf den Sie abzielen möchten. Wenn Sie neue JavaScript-Sprachfunktionen verwenden möchten, müssen Sie diese auf abwärtskompatible Formate für Browser, die noch keine .

Babel ist das am weitesten verbreitete Tool zum Kompilieren von Code. die neuere Syntax in Code enthält, den verschiedene Browser und Umgebungen wie Node.js verstehen. In diesem Leitfaden wird davon ausgegangen, dass Sie Babel verwenden. müssen Sie der Einrichtungsanleitung folgen, wenn Sie dies noch nicht getan haben. „webpack“ auswählen in Build Systems, wenn Sie Webpack als Module Bundler in Ihrer App verwenden.

Um mit Babel nur das zu übersetzen, was für Ihre Nutzer benötigt wird, Folgendes ist erforderlich:

  1. Identifizieren Sie die Browser, auf die Sie die Anzeigen ausrichten möchten.
  2. Verwende @babel/preset-env mit 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 ermitteln

Bevor Sie damit beginnen, zu modifizieren, wie der Code in Ihrer Anwendung transpiliert wird, müssen Sie welche Browser auf Ihre Anwendung zugreifen. Analysieren, welche Browser die Ihre Nutzer derzeit verwenden, sowie für diejenigen, die Sie ansprechen möchten, um fundierte Entscheidung zu treffen.

Verwenden Sie @babel/preset-env.

Das Transpilieren von Code führt in der Regel zu einer Datei, die größer ist als in ihrer ursprünglichen Form. Indem ihr die Menge an Zusammenstellungen können Sie die Größe Ihrer Sets reduzieren, um die Leistung einer Webseite zu verbessern.

Anstelle bestimmter Plug-ins, um bestimmte Sprachen selektiv zu kompilieren die Sie nutzen, bietet Babel eine Reihe von Voreinstellungen, die Plug-ins bündeln. miteinander verbinden. Verwenden Sie @babel/preset-env. , um nur die Transformationen und Polyfills einzuschließen, die für die von Ihnen geplanten Browser erforderlich sind. Ausrichtung.

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

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

Geben Sie im Feld targets an, welche Browserversionen eingeschlossen werden sollen indem Sie dem Feld browsers eine entsprechende Abfrage hinzufügen. @babel/preset-env kann in die Browserliste integriert werden, eine Open-Source-Konfiguration, die von verschiedenen Tools für die Ausrichtung auf Browser. Eine vollständige Liste kompatibler Suchanfragen findest du in der Browserslist-Dokumentation. Alternativ können Sie eine .browserslistrc-Datei verwenden, um die Umgebungen auf die Sie Ihre Anzeigen ausrichten möchten.

Der Wert ">0.25%" weist Babel an, nur die Transformationen einzubeziehen. zur Unterstützung von Browsern, die mehr als 0,25% der weltweiten Nutzung. Dadurch wird sichergestellt, dass Ihr Bundle keine unnötigen Code für Browser, die nur von einer sehr kleinen Gruppe von Nutzern verwendet werden.

In den meisten Fällen ist dies der bessere Ansatz als Konfiguration:

  "targets": "last 2 versions"

Mit dem Wert "last 2 versions" wird der Code für den die letzten zwei Versionen jedes Browsers, Das bedeutet, dass Support für eingestellte Browser wie Internet Explorer bereitgestellt wird. Dies kann die Größe Ihres Sets unnötig erhöhen, wenn Sie diese nicht erwarten. Browser, mit denen auf Ihre Anwendung zugegriffen werden soll.

Letztendlich sollten Sie die richtige Kombination von Suchanfragen auswählen, damit nur die Ihren Anforderungen entsprechen.

Moderne Fehlerkorrekturen aktivieren

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

Die Funktion wurde ursprünglich als separate Voreinstellung entwickelt. Fehlerkorrekturoption in @babel/preset-env behebt dieses Problem, indem moderne Syntax, die in einigen Browsern fehlerhaft ist, in die nächste Syntax, die in diesen Browsern nicht fehlerhaft ist. Das Ergebnis ist nahezu identischer moderner Code mit ein paar kleinen Syntaxanpassungen, die die Kompatibilität in allen Zielbrowsern garantieren. So verwenden Sie diese müssen Sie @babel/preset-env 7.10 oder höher installiert haben. Legen Sie dann Property bugfixes mit true:

{
 "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 zur Verfügung. Sie können Module verwenden, um Skripts zu erstellen, die Daten aus anderen Modulen importieren und exportieren können. Sie können sie auch mit @babel/preset-env verwenden, um eine Ausrichtung auf Browser vorzunehmen, die den .

Anstatt nach bestimmten Browserversionen oder Marktanteilen zu suchen, sollten Sie Geben Sie "esmodules" : true im Feld targets der Datei .babelrc an.

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

Viele neuere ECMAScript-Funktionen, die mit Babel kompiliert wurden, werden bereits unterstützt. in Umgebungen, die JavaScript-Module unterstützen. Dadurch erhalten Sie Vereinfachen Sie das Verfahren, dafür zu sorgen, dass nur transpilierter Code verwendet wird für Browser, die sie tatsächlich benötigen.

In Browsern, die Module unterstützen, werden Skripts mit einem nomodule-Attribut ignoriert. Umgekehrt ignorieren Browser, die keine Module unterstützen, Skriptelemente mit type="module" Das bedeutet, dass Sie sowohl ein Modul als auch ein kompiliertes Fallback einbinden können.

Im Idealfall sind die beiden Versionsskripts einer Anwendung wie folgt enthalten:

  <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 und ignorieren compiled.js. Bei Browsern, die Module nicht unterstützen, ist das Gegenteil der Fall.

Wenn Sie Webpack verwenden, können Sie in Ihren Konfigurationen für zwei Versionen Ihrer Anwendung erstellen:

  • Eine Version nur für Browser, die Module unterstützen.
  • Eine Version, die ein kompiliertes Skript enthält, das in jedem älteren Browser funktioniert. Diese Datei ist größer, da die Transpilierung eine größere Anzahl von Browsern unterstützen muss.

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