Anzeige
Anzeige
News
Artikel merken

Webpack 5 stellt Killer-Feature für Micro-Frontends vor

Der Bundler erfährt mit dem fünften Major Release einige Breaking Changes. Die wohl bedeutendste Neuerung: Module Federation.

2 Min. Lesezeit
Anzeige
Anzeige

Die wohl spannendste Neuerung in Webpack 5 heißt Module Federation. (Bild: Zack Jackson/inDepth.dev)

Zweieinhalb Jahre nach dem Release von Webpack 4 hat der Bundler mit Version 5 jetzt erneut ein Update erhalten. Laut offiziellem Blogpost zum Release wird an der neuen Version momentan noch fleißig entwickelt. Das Team um das Open Source Tool erwartet für die kommenden Tage und Wochen noch einige Bug Fixes, Verbesserungen sowie neue Features für V5.

Game Changer für Microfrontends: Module Federation

Anzeige
Anzeige

Die wohl spannendste Neuerung an V5 heißt Module Federation. Bislang gab es keine optimale Lösung für das Teilen von Code zwischen voneinander unabhängigen Applikationen. Ein möglicher Weg war es bisher, den betreffenden Code zu extrahieren, ihn zu einem npm-Paket zu verpacken und zu publishen, betreffendes Paket in beiden Codebases einzubinden und beide Apps zu republishen. Ein anderer, den betreffenden Code zu extrahieren, zu bündeln und das Ganze via Edge Side Includes oder einen Microfrontends-Ansatz jeweils zur Laufzeit zu integrieren. Das Resultat: Die betreffenden Anwendungen waren nicht mehr eigenständig und meistens wurde nur eine geringe Anzahl Dependencies geteilt. Es lohnte sich somit quasi kaum, Feature-Code oder Komponenten zwischen separat gebündelten Applikationen zu teilen.

Dieses Problem soll mit Webpacks fünftem Versions-Update gelöst werden: Module Federation ermöglicht das Teilen von Code über verschiedene Webpack Builds hinweg. Aus Laufzeitperspektive verhalten sich die Module verschiedener Builds wie ein großes zusammenhängendes Modul-Diagramm. Module Federation ermöglicht JS-Apps das Laden von Code aus anderen Applikationen und das Teilen bereits vorhandener Dependencies mit dem geladenen Modul. Fehlt eine von dem Code aus der anderen Codebase benötigte Dependency, lädt Webpack diese vom Build-Origin des federierten Codes, ansonsten stützt sich dieser auf die bereits vorhandenen. So können Dopplungen und unnötiger Payload vermieden werden. Module Federation ermöglicht quasi das Teilen von Dependencies zwischen voneinander komplett unabhängigen Codebases wie in einem monolithischen Webpack-Build. Mit dem Unterschied, dass die einzelnen Builds weiterhin komplett in ihrem eigenen Repository leben, unabhängig voneinander deployed werden können und als eigenständige (Single Page) App funktionieren. Wer sich weitergehend für die Funktionsweise und Entstehungsgeschichte des Features interessiert, sei an den zugehörigen Blogpost des verantwortlichen Entwicklers, Zack Jackson, verwiesen.

Anzeige
Anzeige

Weitere Neuerungen

Zudem wurde die Build-Performance in V5 über eine Neuerung namens Persistent Caching verbessert. Auch Webpacks Langzeit-Caching-Mechanismus hat mit verbesserten Algorithmen und Defaults ein Update erhalten. Für verbesserte Bundle-Größen wurden Tree Shaking und Code Generation des Bundling-Tools überarbeitet, zudem soll das Tool jetzt besser mit der Webplattform kompatibel sein. Außerdem hat das Webpack-Team mit dem neuen Release wohl gründlich aufgeräumt und unausgegorene Strukturen, die aufgrund der Implementation neuer Features in V4 unter Vermeidung nicht abwärts kompatibler Änderungen entstanden waren, wurden laut Webpack-Blog in V5 bereinigt und veraltete Features entfernt. Wer weiterführende Informationen zu den zahlreichen Änderungen und Neuerungen oder zur Migration auf die neue Version wünscht, sei an den offiziellen Blogpost zum Release verwiesen.

Anzeige
Anzeige

Passend dazu: Webpack-Core-Member Johannes Ewald: „Ein Open Source Projekt ist kein Startup“

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige