Webpack → Vite: Eine Geschichte über die Migration des Bundlers
(engineering.ab180.co)Ich möchte von unseren Erfahrungen berichten, als wir Webpack, das wir fünf Jahre lang seit dem Launch unseres Services genutzt hatten, auf Vite umgestellt haben. Es gibt noch vieles, was unvollkommen ist, aber ich würde mich freuen, wenn ihr den Text mit Vergnügen lest.
Die Stärken von Webpack und der Wandel des Web-Ökosystems
Webpack wurde in den vergangenen zehn Jahren entwickelt und gepflegt, und sein Ökosystem ist sehr gut aufgestellt.
Es wird an vielen Stellen eingesetzt, etwa auch in Create React App, und bündelt Module im IIFE-Stil, wodurch verschiedene Browser unterstützt werden.
Allerdings haben sich in den fünf Jahren die Funktionen im Service nahezu verdreifacht, wodurch unter anderem die Build-Zeit stieg und die Developer Experience schlechter wurde. Zugleich gab es durch die Weiterentwicklung des Web-Ökosystems viele Veränderungen, etwa die Unterstützung von ES Modules.
Bundler + Native
In den letzten ein bis zwei Jahren kam zunehmend der Ansatz auf, für Bundling und Transpiling die Leistung nativer Technologien zu nutzen. Damit sollte versucht werden, die Verarbeitungsgrenzen von JavaScript als Single-Thread-System zu überwinden.
Typische Beispiele sind das auf Golang basierende esbuild und das auf Rust basierende SWC.
Erster Versuch: Bundling nur mit esbuild
Damals entschieden wir uns unter Berücksichtigung von Stabilität, Plugins und dem Ökosystem für einen Bundler auf Basis von esbuild. Zugleich wollten wir herausfinden, wie hoch die Leistung von esbuild selbst tatsächlich ist.
Nach der Installation des Pakets führten wir das Build-Skript aus, und ein Build, der zuvor etwa 210 Sekunden dauerte, war in nur 2,16 Sekunden abgeschlossen. Das entsprach einer etwa 100-mal schnelleren Build-Geschwindigkeit.
Allerdings wurde es mit Babel für den Einsatz von EmotionJS zehnmal langsamer.
Außerdem unterstützt esbuild kein HMR, weshalb wir es für schwer einsetzbar hielten. Man hätte HMR direkt selbst implementieren können, aber wir gingen davon aus, dass der Aufwand sowie die Kosten für Wartung, Pflege und Verwaltung sehr hoch wären.
Zweiter Versuch: Bundling mit Vite
Das Konzept von Vite besteht darin, Dependencies und Source Code voneinander zu trennen.
Dependencies werden nach der Installation nicht mehr verändert und daher vorab mit esbuild transpiliert. Source Code ändert sich häufig und wird deshalb per ESM geladen. Die Build-Ergebnisse werden gecacht, sodass schnelle Development-Builds möglich sind.
Mit dem von Vite bereitgestellten Template ließ sich die Migration leicht durchführen. Es gab zwar einige Probleme, diese konnten aber schnell gelöst werden, und wir konnten eine deutlich kürzere und prägnantere Konfiguration als mit Webpack umsetzen.
Ergebnis der Bundler-Migration
Bei der Messung der Build-Zeit auf Netlify sank sie von durchschnittlich 250 Sekunden auf durchschnittlich 90 Sekunden. Das wurde auf 36 % des bisherigen Niveaus reduziert.
Durch die kompakteren Konfigurationsdateien konnten Teammitglieder leicht eigene angepasste Build-Umgebungen erstellen, was die Effizienz steigerte.
Für weitere Verbesserungen könnte man auf eine CSS-in-JS-Bibliothek ohne Babel-Abhängigkeit umsteigen und ein Monorepo einführen.
Was das Ökosystem betrifft, könnte Babel ersetzt werden, sobald SWC ausreichend stabil ist, und auch der TypeScript Type Checker wird derzeit auf Native portiert.
Erkenntnisse
- Selbst groß wirkende Aufgaben lassen sich leicht lösen, wenn man sie in kleine Teile zerlegt, testet und viel darüber diskutiert.
- Auch Tools, die heute weit verbreitet sind, können durch die Weiterentwicklung des Ökosystems schnell verschwinden.
- Gute Zugänglichkeit schafft eine gute Umgebung.
3 Kommentare
Die Geschwindigkeit von esbuild ist erstaunlich.
Ich war erst skeptisch, als selbst auf der Hauptseite von esbuild damit geworben wurde, dass es 10- bis 100-mal schneller sei, aber als ich es tatsächlich gesehen habe, war es wirklich schockierend!
Ich freue mich auch sehr darauf, dass so eine Zeit kommt! Ich glaube, das wird das Entwickeln wirklich viel angenehmer machen :)