esbuild, Teil 1: JavaScript-Bundling leicht gemacht
Als Hoffnungsträger unter den JavaScript-Bundlern gilt esbuild. Zu seinen Vorteilen zählen eine hohe Geschwindigkeit und eine leichte Erweiterbarkeit.
(Bild: Shutterstock)
- Lars Gersmann
Wer täglich mit der Entwicklung von Frontend-JavaScript und CSS zu tun hat, muss sich früher oder später mit JavaScript-Bundlern wie webpack, Parcel oder Rollup befassen. Bundler-Konfigurationen werden mit der Zeit oft komplex und kommen fast nie ohne Plug-ins von Drittanbietern aus, was auf lange Sicht die Pflege der Konfiguration und des Plug-in-Managements sehr aufwendig macht.
Zeit, sich mit esbuild auseinanderzusetzen: fast schon unverschämt schnell und so einfach erweiterbar, dass man durchaus auch ohne Plug-ins anderer Anbieter rasant zum Ziel kommt. Der Neuling esbuild hat sich zur Aufgabe gemacht, Bundling und Transpilation nicht nur einfacher umzusetzen als die Konkurrenz, sondern auch wesentlich performanter.
Ob bei großen oder kleinen Web-Frontend-Projekten führt an der Nutzung eines JavaScript-Transpilers mittlerweile kein Weg mehr vorbei – und sei es nur, um JSX-Syntax (JavaScript Syntax Extension) in Vanilla-JavaScript umzuwandeln. Kommen dann noch Anforderungen für die Lauffähigkeit in älteren Browsern oder die Integration in eine bereits bestehende JavaScript-Umgebung hinzu, wird es nötig, sich mit der oft anspruchsvollen Konfiguration auseinanderzusetzen. Dazu kommt, dass viele Bundler auch als Build-Tools zu sehen sind beziehungsweise sich als solche ausgeben, was ihre Komplexität weiter erhöht.
Build-Tool, Transpiler oder Bundler?
- Build-Tools sind sprachunabhängige Werkzeuge zur Definition und Ausführung von einzelnen Build-Schritten, die untereinander Abhängigkeiten haben dürfen. Typische Vertreter sind Gulp, Grunt und make.
- Transpiler sind sprachspezifische Werkzeuge, die eine Syntax in eine andere überführen können. In der Webentwicklung werden Transpiler wie webpack, Rollup, Sass oder esbuild häufig eingesetzt.
- Bundler sind zielplattformspezifische Werkzeuge zum Erzeugen von plattformspezifisch ausführbaren Artefakten. Bei Bundlern für Webanwendungen verschwimmen die Grenzen: Bundler sind meist auch (gezwungenermaßen) Transpiler. Typische Vertreter sind webpack, Rollup und esbuild.
Build-Tools wie make verwalten Aufrufe an sprachspezifische Werkzeuge, etwa Compiler, und dienen in erster Linie der Definition einzelner Build-Schritte wie "Kompilieren" oder "Zip-Archiv bauen" und der Abhängigkeiten zwischen ihnen. So lässt sich definieren, dass der Schritt "Zip-Archiv bauen" als Vorbedingung den Schritt "Kompilieren" hat. In ausgewachsenen Build-Tools wie make lassen sich zusätzlich einzelne Build-Schritte als Abhängigkeiten von (Quell-)Dateien und Verzeichnissen angeben. Dadurch wird etwa der Schritt "Kompilieren" – und in der Folge auch der Schritt "Zip-Archiv bauen" – nur ausgeführt, wenn sich eine der Quelldateien geändert hat. Somit erfolgen nur die Build-Schritte, die notwendig sind.
Transpiler sind sprachspezifische Tools, die Quelltexte in eine andere Syntax überführen. Im Falle von JavaScript soll der Einsatz eines Transpilers oft sicherstellen, dass die transpilierten Quelldateien nur Sprachfeatures beinhalten, die die Zielsysteme oder Browser verstehen. Transpiler gibt es in vielen Programmiersprachen, allerdings ist die Begrifflichkeit "Transpiler" neuer als manches entsprechende Werkzeug. So ist der originale C-Präprozessor zwar schon uralt (erste Erwähnung 1972-73) aber letzten Endes ein Transpiler. Auch diverse CSS-Tools wie Sass oder Less sind Transpiler.
Viele Bundler wurden ursprünglich als reine Transpiler entwickelt, zum Beispiel Babel oder Browserify. Dabei entstand schnell der Wunsch, dass diese Tools doch auch "das bisschen Bundling" übernehmen könnten. Bundling umfasst das Erzeugen des endgültigen Softwareprodukts, das im Fall von webbasierter Software üblicherweise aus deploybaren JavaScript- und CSS-Dateien, einer Manifest-Datei und weiteren Assets wie Images und/oder Fonts bestehen kann.
Bundler sind meist plattformspezifische Tools, die das Programm für die Zielplattform individuell verpacken. Das Ergebnis kann eine Art komprimiertes Archiv sein, wie im Falle von JAR-Dateien für Java. Für Windows-Softwareentwickler stehen etwa InstallShield oder der Microsoft-MSI(X)-Bundler MakeAppx.exe zur Verfügung. Für browserbasierte Anwendungen besteht die Aufgabe des Bundlers im Zusammenfügen vieler einzelner JavaScript-/CSS-Quelldateien zu einigen wenigen großen. Der Bundler untersucht die Quelldateien auf Abhängigkeiten untereinander und produziert daraus ein monolithisches JavaScript- und CSS-Artefakt, das alle notwendigen Abhängigkeiten beinhaltet.
Komplexe Begriffe
In der JavaScript-Welt lassen sich "Transpiler" und "Bundler" nicht klar unterscheiden. Das liegt daran, dass sich JavaScript im Gegensatz zu vielen anderen Programmiersprachen in sehr unterschiedlichen Zielumgebungen einsetzen lässt: sowohl im Browser als auch mittels Node.js außerhalb des Browsers. Diese Plattformen sind aus sicherheitstechnischen und historischen Gründen weit voneinander entfernt. So nutzt Node.js zum Referenzieren anderer JavaScript-Module den Common.js-Standard (const Foo = require('foo.js');), wogegen sich im Browser ausschließlich – erst innerhalb der letzten Jahre – der ECMAScript-Standard mittels import/export zum Laden weiterer JavaScript-Dateien durchgesetzt hat. Der JavaScript-Bundler ist dafür zuständig, die Quelldateien für die entsprechende Zielplattform umzuschreiben, damit diese ihn ausführen kann. Da JavaScript-Projekte der Übersichtlichkeit halber oftmals in sehr viele kleine JavaScript- und CSS-Dateien gesplittet sind, ist eine weitere Aufgabe des Bundlers, sie in wenige große Dateien zusammenzufassen, da das Nachladen vieler kleinerer Dateien im Browser die Performance der Webanwendung deutlich verschlechtern würde. Auch JavaScript-Bibliotheken speziell für Node.js werden oft gebundled, um die Ausführungszeiten einer Node.js-Anwendung zu beschleunigen.
Das Verwischen der Grenzen zwischen Bundler, Transpiler und Build-Tool hat einen entscheidenden Nachteil: All diese Features in einer Software erhöhen die Komplexität des Tools und damit den Aufwand für die Pflege und Nutzung der Software.
Eine typische Verwässerung, die sich aber leider nicht vermeiden lässt, ist etwa das Referenzieren von CSS-Dateien in JavaScript-Dateien in dieser Form: import "mycontrol.css";. Das findet sich in sehr vielen umfangreichen JavaScript-Frontend-Libraries.
