0 Kommentare // Lesezeit: 5 min.
Begriffsklärung: Transpiler vs. Compiler
Während der Begriff Compiler recht weit verbreitet ist, so ist der Begriff Transpiler wohl weniger geläufig: Ein Transpiler übersetzt den Programmcode einer höheren Programmiersprache in eine andere höhere Programmiersprache. Der Programmcode einer höheren Programmiersprache ist vom Grad der Abstraktion von der Maschinensprache deutlich entfernt. Es wird beispielsweise TypeScript Code in JavaScript Code übersetzt.
Anders ist es beim Compiler, hier wird Programmcode einer höheren Abstraktionsebene in Maschinencode übersetzt. Zum Beispiel, wenn Programmcode der höheren Programmiersprache C mit einem Compiler in Maschinencode übersetzt wird.
Im Zusammenhang mit diesem Beitrag wird also ES6 Syntax mit neuen Features wie z.B. Classes, const und let Variablen, Destructuring etc. in Browser-kompatibles JavaScript übersetzt. Daher sprechen wir nach obenstehender Definition von Transpiling.
Geschichte von Babel
2005 wurde – nach 5 Jahren Pause – eine neue JavaScript Version veröffentlicht. Und seitdem hat die Entwicklung keine Pause mehr gemacht. Da zu dem Zeitpunkt die Browserlandschaft zum Großteil noch durch alte Browser gekennzeichnet war, die die neuen Versionen nicht unterstützt haben, wurden diese Features nur langsam angenommen. Zu nennen sind hierbei vor allem Internet Explorer Versionen < 8.0.
Das änderte sich mit dem Auftauchen von Babel. Das machte es zum ersten Mal recht einfach möglich, modernes JavaScript zu schreiben, ohne den Support von älteren Browsern zu verlieren. Seit dem Release im Jahr 2014 bis ins Jahr 2019 stiegen die wöchentlichen Download-Zahlen auf rund 16 Millionen Downloads, womit Babel als Transpiler für ES2015+ und das spätere ES6+ bis hin zu Support von JSX für React zum Platzhirsch wurde.
New Kids on the Block
Während Babel noch selbst in JavaScript geschrieben wurde, so kommen in den letzten Jahren neue Bibliotheken auf, die die gleichen Ziele verfolgen, aber auf kompilierte und moderne Sprachen setzen. Zum einen ist esbuild zu nennen, das in Go geschrieben wurde, zum anderen SWC, das in Rust geschrieben ist. Der Performance-Gewinn dieser Tools ist so riesig, dass sie in einer eigenen Liga spielen. So wirbt esbuild auf der Website mit Buildtimes von 0.33 Sekunden gegen 30+ Sekunden mit vergleichbaren Tools. Und SWC vergleicht sich auf der Benchmark-Seite in den meisten Fällen schon nur noch mit esbuild.
SWC & esbuild in Kürze
SWC wird von kdy1dev entwickelt, der laut eigenem Twitter-Account bei Vercel an Next.js arbeitet. Der SWC-Website ist zu entnehmen, dass der Transpiler u. a. von Projekten wie Next.js, Parcel, Deno, Vercel, ByteDance, Tencent und Shopify eingesetzt wird. SWC unterstützt neben JavaScript auch TypeScript und React-JSX Files.
esbuild wird von evanw entwickelt, der laut seiner Webseite ein CoFounder von Figma ist. Der Transpiler wird unter anderem in Projekten wie Vite und Snowpack, sowie vom Amazon CDK und dem Phoenix Framework benutzt. Unterstützt werden auch hier, neben JavaScript, TypeScript und React-JSX Files.
SWC ausprobieren
Zum Testen von SWC legt man lokal ein neues Projekt an und installiert die npm-Packages:
npm i -D @swc/cli @swc/coreMit folgenden npx-Command kann man das JS-File mit den Standardeinstellungen transpilieren:
npx swc ./file.jsKonfiguration
Zum Konfigurieren und Anpassen der Standardeinstellungen gibt es zwei Konfigurationsdateien:
.swcrcspack.config.js
Das Kompilieren funktioniert von Haus aus ohne eigene Anpassungen. In Codebeispiel 1 sind die alle Konfigurationsmöglichkeiten aufgeführt:
{
"jsc": {
"parser": {
"syntax": "ecmascript",
"jsx": false,
"dynamicImport": false,
"privateMethod": false,
"functionBind": false,
"exportDefaultFrom": false,
"exportNamespaceFrom": false,
"decorators": false,
"decoratorsBeforeExport": false,
"topLevelAwait": false,
"importMeta": false
},
"transform": null,
"target": "es5",
"loose": false,
"externalHelpers": false,
// Requires v1.2.50 or upper and requires target to be es2016 or upper.
"keepClassNames": false
}
}In der spack.config.js lassen sich Quell- und Zielordner der zu verarbeitenden Dateien anpassen:
module.exports = {
entry: {
web: __dirname + "/src/index.ts",
},
output: {
path: __dirname + "/dist",
},
};Bundling
Das Bundling von JavaScript- und TypeScript-Files nennt sich bei SWC ’spack’. Als Voraussetzung muss eine spack.config.js angelegt werden, in dem Quell- und Zielordner angegeben werden. Das Bundling kann dann im Terminal mit npx spack gestartet werden.
Minification
Zur Minification steht auf der SWC-Seite aktuell folgender Hinweis: 'Starting with v1.2.67, you can configure SWC to minify your code by enabling minify in your .swcrc file.'
esbuild ausprobieren
Die Pakete sind zu installieren mit:
npm install esbuildFolgender Befehl ist auszuführen:
./node_modules/.bin/esbuild app.js --bundle --outfile=out.jsKonfiguration
Im Gegensatz zu SWC nutzt esbuild keine Konfigurationsdateien, sondern erlaubt die Konfiguration beim Aufruf des Programms. Die Dokumentation zeigt hierbei Beispiele für die Kommandozeile, JavaScript und Go auf. Hier ein Beispiel für JavaScript:
require('esbuild').buildSync({
entryPoints: ['app.jsx'],
bundle: true,
minify: true,
sourcemap: true,
target: ['chrome58', 'firefox57', 'safari11', 'edge16'],
outfile: 'out.js',
})Bundling
Fürs Bundling muss nur, wie im Beispiel bundle als true angegeben werden. Ebenso gibt es die Möglichkeit, das Target für die Browser anzugeben, wie in der target Option zu sehen.
Minification & Sourcemap
Wie das Beispiel außerdem zeigt, werden diese Optionen unterstützt, aber die Dokumentationen geben noch viele weitere Details darüber aus, wie mittels der API und des Script Ansatzes weitgehender Einfluss auf den Prozess genommen werden kann.
Fazit
Beide Tools bieten also riesige Performance-Gewinne gegenüber dem Platzhirsch Babel, aber der Wechsel ist aufgrund der vielen Konfigurationsmöglichkeiten der Tools nicht immer als Drop-In möglich.
Außerdem hat der Performance-Gewinn nur indirekt Auswirkungen auf die Webseite, da diese Tools nur vom Entwickler oder in Deployment Pipelines genutzt werden. Aber gerade auf der Entwicklungsseite hilft es ungemein, wenn eine Änderung nach wenigen Augenblicken Auswirkungen auf dem Bildschirm zeigt, statt erst nach einigen Sekunden.
Kontaktieren Sie uns!
Wir sind eine Digitalagentur, die sich auf die Entwicklung digitaler Produkte spezialisiert hat. Unsere Kernthemen sind Webseiten und Portale mit TYPO3, eCommerce mit Shopware und Android und iOS-Apps. Daneben beschäftigen wir uns mit vielen weiteren Themen im Bereich Webentwicklung. Kontaktieren Sie uns gerne mit Ihren Anliegen!
Kommentare