Micro-frontends: Module Federation
Verwenden Sie Webpack Module Federation oder Vite Federation, um ein großes Frontend in unabhängig bereitgestellte Remotes aufzuteilen, die von einer Shell-App genutzt werden.
Micro-frontends: Module Federation ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Micro-frontends?
Aufteilung eines großen Frontends in unabhängig entwickelte und bereitgestellte Einheiten — typischerweise eine pro Team oder Geschäftsbereich. Jede Einheit kann ihr eigenes Framework, Repository, ihre eigene Bereitstellungspipeline und sogar ihren eigenen Technologiestack haben. Eine Shell-App verbindet sie zur Laufzeit.
Warum Micro-frontends?
Organisationen mit mehr als zehn Frontend-Teams stoßen an Grenzen: Engpass durch ein einzelnes Repository, lange Build-Zeiten und miteinander kollidierende Release-Zeitpläne. Mit Micro-frontends können Teams unabhängig ausliefern — auf Kosten zusätzlicher architektonischer Komplexität.
Module Federation — Die zentrale Technik
Webpack Module Federation (Webpack 5, auch Vite über ein Plugin) ermöglicht es einer Shell-App, zur Laufzeit Code aus unabhängig bereitgestellten Remotes zu importieren. Das Remote stellt bestimmte Module bereit; die Shell verwendet sie.
Remote-Konfiguration
Die Remote-App stellt ihre Module über die webpack-Konfiguration bereit.
// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
output: { publicPath: 'https://product-team.example.com/' },
plugins: [
new ModuleFederationPlugin({
name: 'productApp',
filename: 'remoteEntry.js',
exposes: {
'./ProductPage': './src/ProductPage',
'./productClient': './src/api/client'
},
shared: ['react', 'react-dom']
})
]
};Shell- (Host-)Konfiguration
Die Shell legt fest, welche Remotes sie importiert.
// shell app: webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'shell',
remotes: {
product: 'productApp@https://product-team.example.com/remoteEntry.js'
},
shared: ['react', 'react-dom']
})
]
};Remote-Module importieren
Verwenden Sie einen dynamischen Import — webpack löst ihn über die Federation-Runtime auf.
// shell src/App.tsx
import { lazy, Suspense } from 'react';
const ProductPage = lazy(() => import('product/ProductPage'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<ProductPage />
</Suspense>
);
}Vite Federation
Vite unterstützt Module Federation über das Plugin @originjs/vite-plugin-federation — mit einer ähnlichen API.
// vite.config.ts
import federation from '@originjs/vite-plugin-federation';
export default {
plugins: [federation({
name: 'shell',
remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
shared: ['react', 'react-dom']
})]
};Gemeinsame Abhängigkeiten
Führen Sie Bibliotheken wie React in shared auf, damit sie nicht zweimal gebündelt werden. Die Federation-Runtime löst zur Laufzeit die höchste kompatible Version auf.
Unabhängige Bereitstellung
Jedes Remote verfügt über eine eigene Build- und Bereitstellungspipeline. Die Shell verweist auf eine URL — beim Bereitstellen eines neuen Remotes wird es automatisch für alle Konsumenten ausgerollt.
Kommunikation zwischen Apps
Geben Sie den Status nicht über direkte Importe weiter — verwenden Sie Events (CustomEvent), einen kleinen gemeinsamen Bus oder postMessage. Halten Sie die Grenzen sauber, damit die Unabhängigkeit erhalten bleibt.
Alternativen: iframes und Web Components
iframes: stärkste Isolation, aber umständliche Navigation und CSS. Web Components: native Browser-Unterstützung, keine Bindung an ein Framework, aber eingeschränkter gemeinsamer State. Module Federation schafft ein Gleichgewicht zwischen Isolation und Entwicklerfreundlichkeit.
Abwägungen
Vorteile: unabhängige Deployments, freie Technologiewahl, autonome Teams. Kosten: komplexe Build-Konfiguration, Konflikte bei gemeinsamen Abhängigkeiten, schwer zu debuggende Laufzeitfehler und höhere Bundle-Komplexität. Lohnt sich nur für tatsächlich große Organisationen.
Wann Sie darauf verzichten sollten
Projekte mit nur einem Team, MVPs und Websites mit weniger als 100 Mitarbeitenden im Frontend. Die Komplexitätskosten sind real — die meisten Teams sollten stattdessen ein Monorepo verwenden.
Wissenscheck
Was ermöglicht Webpack Module Federation in einer Micro-Frontend-Architektur?
Zusammenfassung: Micro-frontends
Frontend nach Team oder Domäne für unabhängige Deployments aufteilen. Module Federation (webpack 5 / Vite plugin) — die Shell importiert Remotes zur Laufzeit. Ein Remote stellt Module bereit; die Shell deklariert Remotes; beide teilen Abhängigkeiten wie react. Für die Kommunikation zwischen Apps Events verwenden. Komplex — nur für tatsächlich große Organisationen geeignet.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Micro-frontends: Module Federation“ kostenlos?
Ja — der vollständige Text von „Micro-frontends: Module Federation“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Micro-frontends: Module Federation“?
Verwenden Sie Webpack Module Federation oder Vite Federation, um ein großes Frontend in unabhängig bereitgestellte Remotes aufzuteilen, die von einer Shell-App genutzt werden. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Micro-frontends: Module Federation“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Atomic Design: Atome, Moleküle und Organismen
- Monorepo-Einrichtung mit Turborepo
- Micro-frontends: Module Federation
- Featurebasierte Ordnerstruktur