Schnelle JavaScript-Bündelung mit esbuild

Blog

Schnelle JavaScript-Bündelung mit esbuild

Modulare Programmierung ist eine Softwareentwurfstechnik, bei der die verschiedenen Funktionen eines Programms in separat entwickelte Codemodule unterteilt werden. Moderne Programmierung basiert stark auf Modularität, weshalb Sie einen Modulbundler benötigen, um alle separaten Dateien zu einer einzigen zusammenzuführen.



In der JavaScript-Community sind einige Bundler verfügbar, wie z WebPack , Aufrollen , und Paket . Diese sind jedoch nicht schnell genug, da sie mit JavaScript aufgebaut sind, was bekanntlich in Sachen Performance zu wünschen übrig lässt. Glücklicherweise gibt es einen neuen Bundler, der mit Go erstellt wurde und schneller arbeitet als andere Bundler.

In diesem Leitfaden werden wir es erkunden bauen , ein JavaScript-Bundler und -Minifier, der JS-Code für die Verteilung im Web verpackt. Wir werden untersuchen, wie es so schnell funktioniert und warum Sie dieses Tool 2020 und darüber hinaus im Auge behalten sollten.



Was ist esbuild und warum?

Dies ist ein JavaScript-Bündel und -Minifier. Es verpackt JavaScript-Code für die Verteilung im Web.

Warum ein weiteres JavaScript-Build-Tool erstellen? Die aktuellen Build-Tools für das Web sind mindestens eine Größenordnung langsamer, als sie sein sollten. Ich hoffe, dass dieses Projekt als Existenzbeweis dafür dient, dass unsere JavaScript-Tools viel, viel schneller sein können.



Vergleich von Esbuild mit anderen Bundlern (Benchmark)

esbuild parallelisiert das Parsen, Drucken und die Generierung von Quellzuordnungen vollständig. All diese Funktionen machen esbuild extrem schnell. Um Ihnen bei der Auswahl des besten Bundles für Ihr nächstes JavaScript-Projekt zu helfen, vergleichen wir esbuild mit anderen Tools auf dem Markt.

Mein Haupt-Benchmark nähert sich einer großen Codebasis durch Duplizieren der drei.js 10-mal archivieren und ein einzelnes Bundle von Grund auf neu erstellen, ohne Caches. Für diesen Benchmark ist esbuild 10-100x schneller als die anderen von mir getesteten JavaScript-Bundler (Webpack, Rollup, Parcel und FuseBox). Der Benchmark kann mit |_+_| ausgeführt werden.

Wie kaufe ich Safemoon auf Bitmart?

Benchmark-Vergleich von JavaScript Bundler

Jede gemeldete Zeit ist der beste von drei Läufen. Ich führe esbuild mit |_+_| aus. Ich habe das |_+_| . verwendet Plugin, da Rollup selbst keine Minimierung unterstützt. Webpack verwendet |_+_|. Paket verwendet die Standardoptionen. FuseBox wird mit |_+_| konfiguriert. Die absolute Geschwindigkeit basiert auf der Gesamtzeilenanzahl einschließlich Kommentaren und Leerzeilen, die derzeit 547.441 beträgt. Die Tests wurden auf einem MacBook Pro 2019 mit 6 Kernen und 16 GB RAM durchgeführt.

Das Ergebnis des Benchmarkings ist überwältigend: esbuild ist 10 bis 100 Mal schneller als andere Bundler.

Übrigens können Sie diesen Benchmark auf Ihrem Rechner ausführen und sich selbst davon überzeugen. Installiere das Go-Sprach-Toolchain und führen Sie den folgenden Befehl aus:

make bench-three

Warum ist es schnell?

Mehrere Gründe:

  • Es ist in Go geschrieben, einer Sprache, die zu nativem Code kompiliert wird
  • Parsen, Drucken und Generieren von Quellzuordnungen sind alle vollständig parallelisiert
  • Alles ist in sehr wenigen Durchgängen ohne teure Datentransformationen erledigt
  • Der Code wurde mit Blick auf Geschwindigkeit geschrieben und versucht, unnötige Zuweisungen zu vermeiden

Status

Derzeit unterstützt:

  • CommonJS-Module
  • ES6-Module
  • Bündelung mit statischer Bindung von ES6-Modulen mit |_+_|
  • Vollständige Minimierung mit |_+_| (Leerzeichen, Bezeichner und Mangel)
  • Vollständige Unterstützung von Quellkarten, wenn |_+_| aktiviert
  • JSX-zu-JavaScript-Konvertierung für |_+_| Dateien
  • Bezeichnerersetzungen zur Kompilierzeit über |_+_|
  • Pfadersetzung mit dem |_+_| Feld in |_+_|
  • Automatische Erkennung von |_+_| in |_+_|

Dies ist ein Hobbyprojekt, das ich in der Winterpause 2019-2020 geschrieben habe. Ich glaube, dass es relativ vollständig und funktional ist. Es ist jedoch brandneuer Code und hat wahrscheinlich viele Fehler. Es wurde auch noch von niemandem in der Produktion verwendet. Benutzung auf eigene Gefahr.

Beachten Sie auch, dass dies keine vollständige Unterstützung für die Reduzierung der modernen Sprachsyntax auf frühere Sprachversionen bietet. Im Moment werden nur Klassenfelder und der Nullish-Koaleszenz-Operator abgesenkt.

Ich persönlich möchte kein großes Open-Source-Projekt betreiben, daher suche ich derzeit nicht nach Beiträgen.

Ist esbuild produktionsreif?

Die Geschwindigkeit dieses Bundlers ist unbestritten. Aber ist es serienreif?

Im Moment ist esbuild ein kleines Open-Source-Projekt; Es wird von einem Mann entwickelt und gepflegt. Dies ist weitgehend konstruktionsbedingt. Per Autor: Ich persönlich möchte kein großes Open-Source-Projekt betreiben, daher suche ich derzeit nicht nach Beiträgen.

Obwohl dies die Entwicklung des Tools unweigerlich verlangsamen wird, ist es bereits ein großartiger Bundle mit robuster Unterstützung für gängige JS-Module, JSX-zu-JavaScript-Konvertierung usw. Es muss jedoch noch in der Produktion verwendet werden; dies jetzt zu tun, wäre riskant und würde wahrscheinlich einige Fehler aufdecken.

Esbuild hat jedoch ein enormes Potenzial, die traditionell träge Aufgabe des Bündelns von Modulen in JavaScript zu rationalisieren, und es lohnt sich, es in Ihrem nächsten Projekt auszuprobieren.

Installieren

Die ausführbare Datei kann mit |_+_| erstellt werden, vorausgesetzt, Sie haben die Go-Sprach-Toolchain installiert. Vorgefertigte Binärdateien sind derzeit auf npm unter separaten Paketen verfügbar:

--bundle --minify --sourcemap

Dies fügt einen Befehl namens |_+_| hinzu.

Verwendungszweck

Die Befehlszeilenschnittstelle nimmt eine Liste von Einstiegspunkten und erstellt eine Bundle-Datei pro Einstiegspunkt. Hier sind die verfügbaren Optionen:

rollup-plugin-terser

Verwendung mit React

So verwenden Sie esbuild mit Reagieren :

  • Stellen Sie sicher, dass die gesamte JSX-Syntax in |_+_| . eingefügt ist Dateien statt |_+_| Dateien, da esbuild die Dateierweiterung verwendet, um zu bestimmen, welche Syntax analysiert werden soll.

  • Wenn Sie TypeScript verwenden, führen Sie |_+_| . aus zuerst umwandeln |_+_| Dateien entweder in |_+_| oder |_+_| Dateien.

  • Wenn Sie esbuild verwenden, um React selbst zu bündeln, anstatt es mit einem |_+_| . einzuschließen Tag in Ihrem HTML-Code müssen Sie |_+_| . übergeben oder |_+_| esbuild auf der Befehlszeile.

  • Wenn Sie verwenden Präagieren statt React musst du auch |_+_| . bestehen esbuild auf der Befehlszeile.

Wenn Sie beispielsweise eine Datei namens |_+_| . haben mit folgendem Inhalt:

JavaScript-Kreis-Fortschrittsbalken
--mode=production --devtool=sourcemap

Verwenden Sie dies für einen Entwicklungsbuild:

useSingleBundle: true

Verwenden Sie dies für einen Produktionsbuild:

make bench-three

Abschluss

Esbuild ist nicht zuletzt der Beweis dafür, dass unsere aktuellen JavaScript-Build-Tools nicht schnell genug sind. Angesichts der Tatsache, dass die Kluft zwischen Esbuild und anderen Bundles in Bezug auf die Leistung so groß ist, hoffe ich, dass dieses Tool dazu beiträgt, die Build-Tools im Allgemeinen im JS-Ökosystem zu verbessern.

#javascript #web-entwicklung