Mikrofrontends: Module Federation
Brug Webpack Module Federation eller Vite Federation til at opdele en stor frontend i selvstændigt deployede remotes, som forbruges af en shell-app.
Mikrofrontends: Module Federation er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er mikrobrugerflader?
Opdeling af en stor brugerflade i dele, der udvikles og udrulles uafhængigt — typisk én pr. team eller forretningsområde. Hver del kan have sit eget framework, repository, udrulningsforløb og endda sin egen teknologistak. En værtsapp samler dem under kørsel.
Hvorfor mikrobrugerflader?
Organisationer med over 10 brugerfladeteams rammer nogle grænser: flaskehalsen ved ét repository, lange byggetider og modstridende udgivelsesplaner. Mikrobrugerflader lader teams levere uafhængigt — til gengæld får arkitekturen større kompleksitet.
Module Federation — den centrale teknik
Webpack Module Federation (Webpack 5, også Vite via et plugin) lader en værtsapp importere kode fra fjernapplikationer, der er udrullet uafhængigt, under kørsel. Fjernapplikationen eksponerer bestemte moduler; værtsappen bruger dem.
Konfiguration af fjernapplikationen
Fjernapplikationen eksponerer sine moduler via Webpack-konfigurationen.
// 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']
})
]
};Konfiguration af værtsapplikationen
Værtsapplikationen angiver, hvilke fjernapplikationer den importerer.
// 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']
})
]
};Import af fjernmoduler
Brug dynamisk import — Webpack løser den via federation-runtime-miljøet.
// 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 understøtter Module Federation via pluginnet @originjs/vite-plugin-federation — med en lignende 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']
})]
};Delte afhængigheder
Angiv biblioteker som React i shared, så de ikke pakkes med to gange. Federation-runtime-miljøet finder den højeste kompatible version under kørsel.
Uafhængig udrulning
Hver fjernapplikation har sit eget bygge- og udrulningsforløb. Værtsapplikationen peger på en URL — når du sender en ny fjernapplikation ud, rulles den automatisk ud til alle forbrugere.
Kommunikation mellem applikationer
Del ikke tilstand via direkte importer — brug hændelser (CustomEvent), en lille fælles hændelsesbus eller postMessage. Hold grænserne rene for at bevare uafhængigheden.
Alternativer: iframes og Web Components
iframes: den stærkeste isolation, men besværlig navigation og CSS. Web Components: indbygget browsersupport og ingen binding til et framework, men begrænset delt tilstand. Module Federation afvejer isolation og udvikleroplevelse.
Afvejninger
Fordele: uafhængige udrulninger, teknologisk frihed og teamautonomi. Ulemper: kompleks buildopsætning, konflikter mellem delte afhængigheder, fejl under kørsel, der er svære at fejlsøge, og øget kompleksitet i bundterne. Det kan kun betale sig i reelt store organisationer.
Hvornår det bør undgås
Projekter med ét team, MVP'er og websteder med færre end 100 frontendudviklere. Kompleksitetsomkostningen er reel — de fleste teams bør i stedet bruge et monorepo.
Hurtigt tjek
Hvad gør Webpack Module Federation muligt i en micro-frontend-arkitektur?
Opsamling: Micro-frontends
Opdel frontend efter team eller domæne for at muliggøre uafhængige udrulninger. Module Federation (webpack 5 / Vite-plugin) — skallen importerer fra fjernmoduler under kørsel. Et fjernmodul eksponerer moduler, skallen erklærer fjernmoduler, og begge deler afhængigheder som react. Brug events til kommunikation på tværs af apps. Det er komplekst og bør kun bruges i reelt store organisationer.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Mikrofrontends: Module Federation” gratis?
Ja — hele teksten til “Mikrofrontends: Module Federation” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Mikrofrontends: Module Federation”?
Brug Webpack Module Federation eller Vite Federation til at opdele en stor frontend i selvstændigt deployede remotes, som forbruges af en shell-app. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Mikrofrontends: Module Federation”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Atomic Design: Atoms, Molecules og Organisms
- Monorepo-opsætning med Turborepo
- Mikrofrontends: Module Federation
- Featurebaseret mappestruktur