Grundlæggende om Module Federation

I Webpack 5 erklærer værten remotes (andre apps, den skal bruge), og fjernapplikationer erklærer exposes (det, de stiller til rådighed). Kørselssystemet henter et lille manifest fra hver fjernapplikation ved opstart og downloader kodeblokke, efterhånden som værten importerer dem.

Uden Webpack fungerer den samme idé med importkort, der peger på eksterne ESM-kodeblokke, og dynamisk import til indlæsningen. Værtens importkort siger "feature-cart": "https://cart-team.example.com/entry.js"; import("feature-cart") indlæser den senest udrullede version.

Uden koordinering ville hver fjernapplikation sende sin egen kopi af React. Modulfederationsværktøjer gør det muligt at erklære delte afhængigheder – den første fjernapplikation, der indlæser React, gør det tilgængeligt for alle andre. Indbyggede løsninger bruger importkort til at pege alle fjernapplikationer på den samme React-URL.

Hvert team ejer sin fjernapplikation og udruller, når det passer dem. Værten bygger aldrig igen; den henter nye versioner ved næste sideindlæsning (eller via cache-ugyldiggørelse). Det afkobler udgivelsescyklusserne fuldstændigt.

Fastlås fjernapplikationer til versionsbestemte URL'er (/v1/entry.js, /v2/entry.js), så en opgradering af værten sker bevidst i stedet for implicit. Nogle teams bruger overensstemmelse med semver på importkortniveau via værktøjer som JSPM.

Modulfederation tilføjer kompleksitet under kørsel: flere netværksanmodninger, vanskeligere fejlfinding på tværs af oprindelser og risikoen for inkompatible delte afhængigheder. Brug det, når du reelt har brug for uafhængig udrulning; i mindre projekter er én samlet bygning enklere og hurtigere.

Hvis ét fjernmodul går ned, bør det ikke få værtsapplikationen til at gå ned. Indpak dynamiske imports i fejlafgrænsninger (React) eller try/catch (vanilla), og vis en alternativ brugergrænseflade, når et fjernmodul fejler. Skallen forbliver funktionel, selv hvis en funktion midlertidigt er ødelagt.

Eksporter fra fjernmoduler har ingen typeinformation ved kompilering i værtsapplikationen. Generér delte TypeScript-typer i en separat pakke, som begge sider bruger, eller brug validering under kørsel (Zod, io-ts) ved føderationsgrænsen.

Indbygget føderation (import maps + ESM) er enklere og standardbaseret, men mangler Webpacks koordinering af delte afhængigheder. Vælg Webpack/Module Federation til komplekse applikationer med mange delte afhængigheder, og vælg indbygget føderation til enklere mikrofrontendopsætninger.

W3C undersøger mere avancerede primitiver til modulindlæsning, som vil gøre indbygget føderation mere funktionsrig — herunder bedre forhandling af delte afhængigheder. I dag bør du betragte import maps som grundlaget og lægge dine føderationsværktøjer ovenpå.

Module Federation gør det muligt for en værtsapplikation at indlæse kode fra selvstændigt udrullede fjernmoduler under kørsel. Værktøjerne i Webpack 5 tilføjer forhandling af delte afhængigheder, mens indbygget føderation bruger import maps og dynamisk import. Brug det til mikrofrontendarkitekturer med flere teams, og accepter den ekstra kompleksitet til gengæld for friheden til uafhængig udrulning.