Mikrofrontend: Module Federation
Bruk Webpack Module Federation eller Vite Federation til å dele en stor frontend i uavhengig distribuerte remoter som brukes av en skallapp.
Mikrofrontend: Module Federation er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva er mikrofrontender
Å dele en stor frontend i deler som utvikles og distribueres uavhengig — vanligvis én del per team eller forretningsområde. Hver del kan ha sitt eget rammeverk, repositorium, distribusjonspipeline og til og med sin egen teknologistakk. En shell-app setter dem sammen under kjøring.
Hvorfor mikrofrontender
Organisasjoner med mer enn ti frontend-team møter begrensninger: flaskehalsen ved ett repositorium, lange byggetider og konkurrerende utgivelsesplaner. Mikrofrontender lar team levere uavhengig — på bekostning av større arkitektonisk kompleksitet.
Module Federation — kjerneteknikken
Webpack Module Federation (Webpack 5, også Vite via en plugin) lar en shell-app importere kode fra uavhengig distribuerte remotes under kjøring. Remoten eksponerer bestemte moduler, og shell-appen bruker dem.
Konfigurere en remote
Remote-appen eksponerer modulene sine via webpack-konfigurasjonen.
// 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']
})
]
};Konfigurere shell (host)
Shell-appen erklærer hvilke remotes 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']
})
]
};Importere remote-moduler
Bruk dynamisk import — webpack løser den via federation-kjøremiljø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 støtter Module Federation via pluginen @originjs/vite-plugin-federation — med et 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 avhengigheter
Oppgi biblioteker som React i shared slik at de ikke pakkes inn to ganger. Federation-kjøremiljøet finner den høyeste kompatible versjonen under kjøring.
Uavhengig distribusjon
Hver remote har sin egen bygge- og distribusjonspipeline. Shell-appen peker til en URL — når en ny remote pushes, rulles den automatisk ut til alle forbrukere.
Kommunikasjon mellom apper
Ikke del tilstand via direkte importer — bruk hendelser (CustomEvent), en liten delt bus eller postMessage. Hold grensene tydelige for å bevare uavhengigheten.
Alternativer: iframes og Web Components
iframes: sterkest isolasjon, men upraktisk navigasjon/CSS. Web Components: innebygd nettleserstøtte, ingen binding til et rammeverk, men begrenset delt tilstand. Module Federation balanserer isolasjon med god utvikleropplevelse.
Avveininger
Fordeler: uavhengige utrullinger, teknologisk frihet, selvstendige team. Kostnader: komplekst byggoppsett, konflikter mellom delte avhengigheter, kjøretidsfeil som er vanskelige å feilsøke, økt kompleksitet i bundlene. Bare verdt det for genuint store organisasjoner.
Når det bør unngås
Prosjekter med ett team, MVP-er og nettsteder med færre enn 100 frontend-ansatte. Kompleksitetskostnaden er reell — de fleste team bør heller bruke et monorepo.
Kort sjekk
Hva muliggjør Webpack Module Federation i en mikrofrontendarkitektur?
Oppsummering: Mikrofronter
Del frontend etter team/domene for uavhengige utrullinger. Module Federation (webpack 5 / Vite-plugin) — shell importerer fra remotes ved kjøretid. Remote eksporterer moduler; shell deklarerer remotes; begge deler avhengigheter som react. Bruk hendelser til kommunikasjon på tvers av apper. Komplekst — reserver det for genuint store organisasjoner.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Mikrofrontend: Module Federation» gratis?
Ja – hele teksten i «Mikrofrontend: Module Federation» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Mikrofrontend: Module Federation»?
Bruk Webpack Module Federation eller Vite Federation til å dele en stor frontend i uavhengig distribuerte remoter som brukes av en skallapp. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Mikrofrontend: Module Federation»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Atomic Design: Atomer, molekyler og organismer
- Monorepo-oppsett med Turborepo
- Mikrofrontend: Module Federation
- Mappestruktur basert på funksjoner