Micro Frontends mit Module Federation: Praktischer Leitfaden

Micro Frontends unterteilen eine monolithische Anwendung in kleinere Teile, die jeweils unabhängig voneinander entwickelt, getestet und bereitgestellt werden. Die Module Federation von Webpack 5 stellt die notwendige Infrastruktur für verschiedene Builds bereit, um Module zur Laufzeit gemeinsam zu nutzen, sodass Teams entkoppelt arbeiten können.

Warum Micro Frontends einführen?

Organisatorische Skalierbarkeit, Teams können Funktionen autonom bereitstellen.
Unabhängige Bereitstellung, Aktualisierungen eines Moduls erfordern nicht den Neuaufbau der gesamten Anwendung.
Wiederverwendung von Komponenten, gemeinsam genutzte Bibliotheken werden nur einmal geladen.
Leistung, Laden nach Bedarf (Lazy Loading) reduziert die anfängliche Bundle-Größe.

Schlüsselkonzepte der Modulföderation

Konzept	Beschreibung
Gastgeber	Anwendung, die Remote-Module nutzt.
Remote	Anwendung, die Module über `exposes` verfügbar macht.
Geteilt	Abhängigkeiten (React, lodash), die einmal geladen werden.
Dynamische Fernbedienungen	Laden von Remotes zur Laufzeit über `import()`.

Grundkonfiguration (Webpack), 5 Zeilen

// host/webpack.config.js
module.exports = {
  plugins: [new ModuleFederationPlugin({
    name: 'host',
    remotes: { remote: 'remote@https://example.com/remoteEntry.js' },
    shared: { react: { singleton: true }, "react-dom": { singleton: true } }
  })]
};

// remote/webpack.config.js
module.exports = {
  plugins: [new ModuleFederationPlugin({
    name: 'remote',
    filename: 'remoteEntry.js',
    exposes: { './Button': './src/Button' },
    shared: { react: { singleton: true }, "react-dom": { singleton: true } }
  })]
};

Jede Anwendung hat ihre eigenen webpack.config.js; Der Host importiert das Remote-Modul als remote/Button.

Remote-Modulverbrauch (React), 3 Zeilen

import React, { Suspense } from 'react';
const RemoteButton = React.lazy(() => import('remote/Button'));
export default () => <Suspense fallback="Carregando…"><RemoteButton /></Suspense>;

React.lazy garantiert verzögertes Laden der Remote-Komponente und reduziert so das anfängliche Paket.

Strategien zur Abhängigkeitsversionierung

Singleton stellt sicher, dass nur eine Kopie von React geladen wird.
Strenge Version, verwenden Sie requiredVersion, um Inkompatibilitäten zu vermeiden.
Fallback, konfigurieren Sie fallback: 'path/to/local/react', wenn die Fernbedienung ausfällt.

Bereitstellen und CI/CD

Separater Build, jedes Mikro-Frontend hat seine eigene Pipeline (npm run build).
Veröffentlichen, laden Sie die Assets (remoteEntry.js, Bundles) auf ein CDN hoch.
Cache-Busting, fügen Sie einen Hash in den Dateinamen ein (remoteEntry.[contenthash].js).
Feature-Flags, Remotes über die Konfiguration auf dem Host aktivieren/deaktivieren.

Gute Leistungspraktiken

Chunk-Splitting, verwenden Sie splitChunks, um gemeinsam genutzte Bibliotheken zu extrahieren.
Prefetch/Preload, <link rel="prefetch" href="remoteEntry.js"> zur Verbesserung der Ladezeit.
Baumschütteln, stellen Sie sicher, dass nur gebrauchte Module enthalten sind.
Überwachung, Paketgröße mit webpack-bundle-analyzer verfolgen.

Sicherheit

CORS, konfigurieren Sie Access-Control-Allow-Origin Header auf Remote-Assets.
Integrität, verwenden Sie Subresource Integrity (Attribut integrity) beim Laden von remoteEntry.js.
Sandbox, begrenzen Sie den Umfang der Remotes über CSP (script-src, object-src).

Kurze Checkliste

Konfigurieren Sie ModuleFederationPlugin auf dem Host und den Remotes.
Setzen Sie shared für kritische Abhängigkeiten (Reagieren, lodash).
Lazy Loading mit React.lazy oder import() implementieren.
Veröffentlichen Sie remoteEntry.js auf CDN mit Hash.
Konfigurieren Sie CI/CD für unabhängige Erstellung und Bereitstellung.
Offline-Remote-Fallback testen.
Bundle-Größe und Leistung überwachen.
Wenden Sie CSP und SRI aus Sicherheitsgründen an.

Fazit

Module Federation bringt Modularität und organisatorische Skalierbarkeit in die Welt der Frontends und ermöglicht es Teams, Funktionen unabhängig voneinander bereitzustellen und gleichzeitig ein zusammenhängendes und leistungsstarkes Benutzererlebnis aufrechtzuerhalten. Durch die Einhaltung guter Konfigurations-, Abhängigkeitsversionierungs- und CI/CD-Praktiken kann sich Ihr Team schnell weiterentwickeln, ohne dass die Qualität darunter leidet.

Haben Sie bereits Micro-Frontends implementiert? Teilen Sie Ihre Erfahrungen in den Kommentaren!