Webentwicklung: Build-Tool Parcel mit mehr Performance bei groĂźen Anwendungen
Parcel hat einen neuen Bundling-Algorithmus vorzuweisen und ist in bestimmten Situationen schneller als der neue JavaScript-Bundler Turbopack.
(Bild: sommart sombutwanitkul/Shutterstock.com)
Das Team hinter dem Web-Build-Tool Parcel hat Version 2.8 veröffentlicht. Das Minor Release des Open-Source-Tools bringt einen neuen Bundling-Algorithmus mit, der für große Projekte einen deutlichen Geschwindigkeitsvorteil bieten soll. Daneben schneidet Parcel bei Hot-Module-Replacement-Updates in einem Vergleich besser ab als Vite.js und Turbopack.
Neuer Algorithmus fĂĽr schnellere Performance
Bereits seit Version 2.0 kann Parcel mit automatischem Code-Splitting umgehen. Dieses dedupliziert geteilte Module zwischen verschiedenen Teilen einer Anwendung, beispielsweise Seiten oder dynamische Importe. Dadurch lassen sich häufig verwendete Dependencies wie React unabhängig vom Anwendungscode cachen, wodurch sich der beim Navigieren zwischen Seiten zu ladende Code reduziert. Die ursprüngliche Implementierung funktionierte laut dem Parcel-Team gut für kleine bis mittelgroße Projekte, stieß aber bei größeren Projekten an ihre Grenzen. Zu den Schwierigkeiten zählte eine mitunter unnötige Duplizierung.
Das Softwareunternehmen Atlassian hat dem Open-Source-Tool daher einen neuen Bundling-Algorithmus spendiert, der die Build-Zeit und die Runtime-Performance deutlich verbessern soll. Im Gegensatz zum bisher genutzten Algorithmus beginnt er unter anderem mit einem Graph, der keine Duplizierung enthält, da sich jedes Asset nur in einem Bundle befindet. In einem sehr großen Projekt mit über 60.000 Assets hat sich der neue Algorithmus bereits bewährt: Er reduzierte die Build-Zeit von 25 auf neun Minuten und die Bundle-Größe von 952 MB auf 370 MB. Im Vergleich beträgt die Build-Zeit des Projekts mit webpack 45 Minuten.
Die Veranstalter heise Developer, iX und dpunkt.verlag richten am am 1. Dezember 2022 den enterJS Web-Performance Day aus. Performance-Expertinnen und -Experten zeigen in sieben Online-Vorträgen, wie sich Webanwendungen beschleunigen lassen. Der Frühbucherrabatt gilt bis 15. November.
Deep Dives bieten zwei 2-Tages-Workshops, die ebenfalls online stattfinden:
HMR-Updates schneller als mit Turbopack
Neben einer erhöhten Bundling-Performance bringt Parcel 2.8 auch drei Neuerungen für inkrementelle Rebuilds und Hot Module Replacement: inkrementelles Bundling, Single-threaded-Kompilierung und frühere HMR-Updates. Durch inkrementelles Bundling konnten in dem oben erwähnten Projekt die Rebuild-Zeiten von 40 auf vier Sekunden reduziert werden, was einer zehnfachen Beschleunigung entspricht.
In der End-to-End-HMR-Update-Performance erweist sich Parcel als schneller im Vergleich zum Build-Tool Vite.js und dem erst kürzlich vorgestellten webpack-Nachfolger Turbopack, der sich noch im Alpha-Status befindet. Dazu präsentiert das Parcel-Team Vergleichswerte für die Zeit vom Speichern einer Datei bis zur Sichtbarkeit von Updates im Browser. Der Vergleich bezieht sich auf eine React-App mit 1000 Komponenten. Parcel ist demnach beim Aktualisieren der Root-Komponente 68 Prozent schneller als Turbopack, beim Updaten der Leaf-Komponente 34 Prozent schneller:
| Vite | Turbopack | Parcel | |
| Root | 293,5 ms | 274,8 ms | 88,6 ms |
| Leaf | 143,8 ms | 57 ms | 37,4 ms |
Weitere Informationen zur neuen Minor-Version Parcel 2.8 finden sich in den Release Notes und im Parcel-Blog.
(mai)
