Webpack 4 ist da

Webpack 4 ist da: Kürzere Build-Times und zahlreiche neue Features
Keine Kommentare

Webpack 4 ist fertig und hat erstmals einen eigenen Namen bekommen: Version 4 heißt Legato. Außerdem wurde an der Build-Time gearbeitet. Hier berichtet die Community von einer Verbesserung von bis zu 98 Prozent! Zahlreiche neue Features gab es ebenfalls für die neue Version von Webpack.

Webpack ist ein Module Bundler und vor allem auf das Packen von JavaScript-Dateien für den Browser ausgerichtet, unterstützt aber auch andere Frontend-Technologien. Das Tool wurde zu Version 4 deutlich überarbeitet und bringt zahlreiche neue Features mit. Im Zentrum des aktuellen Release steht die Verbesserung der Build-Time. Im Rahmen der Beta-Phase bat das Team hinter Webpack bereits um Feedback dazu und startete dazu eine Umfrage auf Twitter: Wie sahen die Build-Zeiten in Version 3 aus, wie lang dauert es mit Version 4? Die Community berichtete daraufhin von Zeiten, die von Version 3 zu Version 4 um 60 bis 98 Prozent gesunken seien, wie Sean T. Larkin im Blogpost zum Release von Webpack 4 zitiert.

Webpack 4: Nutzerbefragung zur Build-Time

Einen offiziellen Benchmark für die neue Version von Webpack, die diese Werte belegt, gibt es jedoch nicht. Der Vorteil der Nutzerbefragung auf Twitter liegt allerdings darin, dass Werte für diverse Projektsetups gemessen wurden. So gibt es, abhängig vom Projekt, auch Anwender, die nur von einer geringeren Verbesserung der Build-Time berichten. Die Mehrheit der Teilnehmer an der Twitter-Befragung äußerte sich jedoch definitiv positiv zu den Veränderungen durch die neue Version.

Für die Performanceverbesserung von Webpack 4 wurde unter anderem an UglifyJS gearbeitet. Die Library arbeitet in Webpack nun standardmäßig mit Caching und Parallelisierung. Der Fokus lag insgesamt allerdings weniger auf der initalen Build-Time und mehr darauf, die Geschwindigkeit von inkrementellen Rebuilds zu erhöhen. Einen Überblick über alle Neuerungen an der Performance geben die Release Notes auf GitHub.

Außerdem plant das Webpack-Team weitere Arbeiten am Tool, die sich auf die Build-Time auswirken sollen. Für Webpack 5 wurden darum bereits jetzt weitere Neuerungen mit Einfluss auf die Performance beim Erstellen von Builds angekündigt: Multicore und Persistent Caching sollen in Version 5 implementiert werden.

Neue Features

Neben der verkürzten Build-Time wurden zahlreiche neue Features in Webpack 4 implementiert. So steht nun beispielsweise in der Config ein neues Property namens mode zur Verfügung. Darüber kann entweder die Größe von Builds oder die Build-Time optimiert werden. Entwickler können über die Optionen development und production entscheiden, was optimiert werden soll. Tobias Koppers stellt das mode-Property im Webpack-Blog vor.

Das CommonsChunkPlugin wurde aus Webpack 4 entfernt und durch ein neues API namens optimize.splitChunksersetzt, das zwar Standards setzt, die aber durch den Entwickler überschrieben werden können. optimize.splitChunks generiert automatisch geteilte Chunks für verschiedene Anwendungszwecke. Auch hierzu gibt es einen eigenen Blogpost. Zu den entfernten Features gehören auch module.loaders, loaderContext.options, das Compolation.notCacheable-Flag, das NoErrorsPlugin, sowie Dependency.isEqualResource und NewWatchingPlugin.

Neu ist außerdem, dass Webpack nun import und export aus lokalen WebAssembly-Modulen unterstützt. Der WebAssembly-Support ist allerdings insgesamt noch als experimentell markiert und soll erst zu Webpack 5 finalisiert werden. Daneben werden nun fünf neue Modultypen unterstützt; das Ziel hinter dieser Überarbeitung liegt darin, künftig auch HTML/CSS-Module unterstützen zu können. Dazu wurde die Koppelung der Module an JavaScript aufgelöst.

Achtung, Breaking Changes

Natürlich bringt Webpack 4 auch einige Breaking Changes mit, die auf GitHub nachgelesen werden können. Dort findet sich auch ein Überblick über alle neuen Features und Funktionen von Webpack 4. Im Blogpost zum Release werden einige wichtige neue Features näher vorgestellt, auch der Name Legato wird dort erklärt: Legato heißt in der Musik, dass Noten als Sequenz gespielt werden, ohne dass Pausen dazwischen entstehen. Der Name soll darauf verweisen, dass auch Webpack Anwendungen lückenlos bündelt. Zu beachten ist außerdem, dass noch keine vollständige Dokumentation von Webpack 4 verfügbar ist, auch der Migrationsguide ist noch in Arbeit.

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -