Module Federation: Dynamische Runtime-Imports

In einer Frontend-Organisation mit mehreren Teams müssen mehrere unabhängig bereitgestellte Anwendungen häufig UI-Komponenten und Hilfsfunktionen gemeinsam nutzen. Die Veröffentlichung über npm erfordert eine Versionsanhebung, ein neues Release und eine vollständige erneute Bereitstellung jeder konsumierenden Anwendung. Dadurch entstehen eine enge Kopplung zwischen den Teams und langsame Iterationszyklen.

Der traditionelle Ansatz, gemeinsam genutzten Code als npm-Paket zu veröffentlichen, bedeutet, dass eine Aktualisierung einer gemeinsam genutzten Button-Komponente Folgendes erfordert: das npm-Paket aktualisieren, eine neue Version veröffentlichen, die package.json jeder konsumierenden Anwendung aktualisieren sowie jede konsumierende Anwendung neu erstellen und bereitstellen. Module Federation macht all diese Schritte überflüssig.

Module Federation ermöglicht es einer Anwendung (einem „remote“), JavaScript-Module bereitzustellen, die eine andere Anwendung (ein „host“) zur Laufzeit lädt und ausführt, ohne den host neu zu erstellen oder bereitzustellen. Beim Laden der host-Anwendung werden die Module des remote dynamisch und bei Bedarf abgerufen.

Webpack 5 führte Module Federation als integrierte Kernfunktion über das ModuleFederationPlugin ein. Vor Webpack 5 erforderten ähnliche Muster eine komplexe manuelle Konfiguration oder Plugins von Drittanbietern. Das Plugin übernimmt die gesamte dynamische Ladefunktion und die Verwaltung des gemeinsamen Scopes automatisch.

Ein remote ist eine unabhängig bereitgestellte Anwendung, die ein oder mehrere Module – React-Komponenten, Hilfsfunktionen oder vollständige Feature-Seiten – für andere Anwendungen zur Nutzung bereitstellt. Der remote erstellt ein remoteEntry.js-Manifest, das beschreibt, welche Module bereitgestellt werden und wie sie geladen werden.

Ein host ist eine Anwendung, die Module von einem oder mehreren remotes nutzt. Der host referenziert die remotes in seiner Webpack-Konfiguration anhand ihres Namens und ihrer URL. Wenn der Code des host ein Modul eines remote importiert, ruft die Module-Federation-Laufzeitumgebung es dynamisch von der URL des remote ab und führt es aus.

Gemeinsam genutzte Module sind Bibliotheken wie React und React DOM, die nur einmal geladen werden sollten, selbst wenn sowohl der host als auch der remote sie enthalten. Indem React als gemeinsam genutztes Singleton markiert wird, stellt Module Federation sicher, dass nur eine React-Version ausgeführt wird – das ist entscheidend, da Reacts Hooks bei mehreren Instanzen nicht funktionieren.

Beim Erstellen eines remote generiert Webpack eine Datei namens remoteEntry.js am konfigurierten Speicherort. Diese Datei ist ein schlankes Manifest und Bootstrap-Skript: Sie legt fest, welche Module der remote bereitstellt, listet deren Chunk-URLs auf und initialisiert den gemeinsamen Scope. Der host lädt diese Datei zuerst herunter, um zu ermitteln, welche Module der remote anbietet.

Wenn der host auf einen Import aus einem remote-Modul stößt, prüft er, ob der Code des remote bereits geladen wurde. Falls nicht, ruft er remoteEntry.js von der URL des remote ab, initialisiert den gemeinsamen Scope (einschließlich der Aushandlung von Versionen gemeinsam genutzter Bibliotheken) und lädt anschließend den spezifischen Chunk herunter, der das angeforderte Modul enthält, und führt ihn aus.

Ein Team stellt eine neue Version seines remote (mit einer aktualisierten Button-Komponente) bereit, ohne die host-Anwendung anzupassen. Der nächste Benutzer, der den host lädt, erhält automatisch den neuen Button, da der host immer die aktuelle remoteEntry.js-URL abruft. Kein erneuter Build des host, keine erneute Bereitstellung des host, keine Abstimmung erforderlich.

Ein älteres Micro-Frontend-Muster verwendet iframes, um den von Teams verwalteten Bereichen Isolation zu bieten. Iframes bieten eine starke Isolation, erschweren jedoch gemeinsam genutzten State, URL-Routing und Styling erheblich. Module Federation hält alles im selben JavaScript-Kontext und ermöglicht dadurch gemeinsames Routing, gemeinsam genutzten Authentifizierungsstatus und einheitliches Styling.

Welche Rolle spielt remoteEntry.js in Module Federation?

Module Federation löst das Problem der unabhängigen Bereitstellung gemeinsam genutzten Frontend-Codes, indem es das Laden von Modulen zur Laufzeit ermöglicht. Remotes stellen Module über remoteEntry.js bereit; Hosts nutzen sie dynamisch, ohne neu erstellt werden zu müssen. Gemeinsam genutzte Singletons (React, React DOM) verhindern das doppelte Laden von Bibliotheken. Diese Architektur ermöglicht eine tatsächlich unabhängige Bereitstellung: Aktualisieren Sie ein remote, und alle host-Anwendungen sehen die Änderung sofort.