© PureSolution/Shutterstock.com
Module Federation in webpack 5

Die Microfrontend-Revolution


Die in webpack 5 integrierte Module Federation erlaubt das Laden separat kompilierter Programmteile und das Teilen von Bibliotheken. Damit bietet es endlich eine offizielle Lösung für die Realisierung von Microfrontends.

Bei der Umsetzung von Microfrontends musste man bis dato ein wenig in die Trickkiste greifen. Ein Grund dafür war bisher, dass aktuelle Build-Tools und Frameworks dieses Konzept nicht kennen. Das sich derzeit in der Betaphase befindliche webpack 5 wird hier jedoch einen Kurswechsel einleiten [1].

Es erlaubt einen Ansatz namens Module Federation zum Referenzieren von Programmteilen, die zum Kompilierungszeitpunkt noch nicht bekannt sind. Dabei kann es sich auch um eigenständig kompilierte Microfrontends handeln. Außerdem können die einzelnen Programmteile untereinander Bibliotheken teilen, sodass die einzelnen Bundles keine Duplikate beinhalten.

In diesem Artikel zeige ich anhand eines einfachen Beispiels, wie sich Module Federation [2] nutzen lässt. Der Quellcode befindet sich unter [3].

Beispiel

Das hier verwendete Beispiel besteht aus einer Shell, die in der Lage ist, einzelne separat bereitgestellte Microfrontends bei Bedarf zu laden (Abb. 1).

steyer_federation_1.tif_fmt1.jpgAbb. 1: Shell mit Microfrontend

Die Shell wird hier durch die schwarze Navigationsleiste repräsentiert. Das Microfrontend durch den darunter dargestellten eingerahmten Bereich. Außerdem lässt sich das Microfrontend auch ohne Shell starten (Abb. 2).

steyer_federation_2.tif_fmt1.jpgAbb. 2: Microfrontends im Stand-alone-Modus

Das ist notwendig, um ein separates Entwickeln und Testen zu ermöglichen. Außerdem kann es für schwächere Clients wie mobile Endgeräte von Vorteil sein, nur den benötigten Programmteil laden zu müssen.

Funktionsweise

In der Vergangenheit war die Umsetzung von Szenarien wie das hier gezeigte schwierig, zumal Werkzeuge wie webpack davon ausgehen, dass der gesamte Programmcode beim Kompilieren vorliegt. Lazy Loading ist zwar möglich, aber nur von Bereichen, die beim Kompilieren abgespaltet wurden.

Gerade bei Microfrontend-Architekturen möchte man die einzelnen Programmteile jedoch separat kompilieren und bereitstellen. Daneben ist ein gegenseitiges Referenzieren über den jeweiligen URL notwendig. Dazu wären Konstrukte wie dieses hier wünschenswert:

import('http://other-microfrontend');

Da das aus den genannten Gründen nicht möglich ist, musste man auf Ansätze wie Externals [4] und manuelles Skript-Loading ausweichen. Mit der Module Federation in webpack 5 wird sich das zum Glück ändern.

Die Idee dahinter i...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang