Konsumera delade beroenden
Lär er att effektivt dela gemensamma bibliotek och beroenden mellan federerade applikationer.
Konsumera delade beroenden är en gratis lektion i Mikrofrontendarkitektur med Module Federation på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Mikrofrontendarkitektur med Module Federation, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mikrofrontendarkitektur med Module Federation innehåller totalt 4 lektioner.
Varför dela beroenden?
I Micro Frontends kan olika delar av Er applikation använda samma bibliotek, till exempel React, Vue eller Lodash. Utan noggrann hantering kan varje Micro Frontend paketera sin egen kopia av dessa bibliotek.
Det innebär att användarna laddar ned samma kod flera gånger, vilket ökar laddningstiderna och slösar bandbredd. Delning av beroenden löser detta problem!
Problemet: duplicerade paket
Föreställ Er att huvudapplikationen, värdapplikationen, använder React och att en Micro Frontend i form av en fjärrapplikation också använder React. Om båda paketerar React separat laddar användarens webbläsare ned React två gånger.
- Värdens paket: Innehåller React
- Fjärrapplikationens paket: Innehåller React (igen!)
Detta leder till större applikationer totalt sett och sämre prestanda.
Module Federations lösning
Webpack Module Federation erbjuder en kraftfull lösning: konfigurationen shared. Den gör det möjligt att deklarera gemensamma bibliotek som ska delas mellan Era federerade applikationer.
Module Federation ser sedan till att dessa bibliotek bara läses in en gång, även om flera Micro Frontends är beroende av dem.
Konfigurera `shared`
Ni definierar delade beroenden i ModuleFederationPlugin i filen webpack.config.js. Egenskapen shared är ett objekt där varje nyckel är namnet på en modul som Ni vill dela.
Så här ser den grundläggande strukturen ut:
new ModuleFederationPlugin({
// ... other configs
shared: {
// 'module-name': { options }
'react': { /* ... */ },
'react-dom': { /* ... */ }
}
})Dela med `requiredVersion`
Alternativet requiredVersion är avgörande för kompatibiliteten. Det anger vilket versionsintervall som är godtagbart för ett delat beroende med hjälp av semantisk versionshantering (t.ex. ^18.0.0).
Module Federation försöker använda en kompatibel version som redan har lästs in. Om ingen sådan finns, eller om den är inkompatibel, läser det in en ny version.
shared: {
react: {
requiredVersion: '^18.0.0',
// other options like singleton: true
},
'react-dom': {
requiredVersion: '^18.0.0'
}
}Egenskapen `eager` förklarad
Normalt läses delade moduler in asynkront vid behov. Ibland behövs dock en delad modul direkt vid uppstart, innan några fjärrmoduler ens har begärts.
I sådana fall kan Ni använda alternativet eager: true. Var försiktiga, eftersom detta kan påverka den initiala laddningsprestandan genom att tvinga modulen att läsas in direkt.
shared: {
'my-critical-lib': {
requiredVersion: '^1.0.0',
eager: true // Load this module immediately
}
}Värdens och fjärrapplikationens `shared`-konfigurationer
Både värdapplikationen och fjärrapplikationerna bör vanligtvis definiera samma gemensamma bibliotek som shared. Det talar om för Module Federation att dessa beroenden ingår i den gemensamma poolen.
Module Federation samordnar sedan vilken applikation som faktiskt läser in beroendet och gör det tillgängligt för de andra, så att det bara finns en kopia i webbläsaren.
Praktisk användning av delade beroenden
När react och react-dom har konfigurerats som delade kan applikationskoden importera dem som vanligt. Module Federation hanterar den underliggande logiken och ser till att de läses in effektivt och bara en gång.
Denna minimala React-startpunkt visar hur vanliga importer använder delade beroenden:
import React from 'react';
import ReactDOM from 'react-dom/client';
// This is a minimal React app entry point.
// If 'react' and 'react-dom' are shared in Module Federation,
// these imports will efficiently use a single instance.
function App() {
return (
<div>
<h1>Shared Dependencies Demo</h1>
<p>This app uses React, which can be shared!</p>
</div>
);
}
const rootElement = document.getElementById('root');
if (rootElement) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
} else {
console.error("Root element not found!");
}Fördelar med att dela bibliotek
- Mindre paketstorlekar: Förhindrar att gemensamma bibliotek dupliceras i olika Micro Frontends, vilket direkt minskar den totala mängden kod som användarna laddar ned.
- Förbättrad prestanda: Mindre kod att ladda ned, tolka och köra innebär snabbare initiala sidladdningar och en mer responsiv användarupplevelse.
- Konsekventa versioner: Hjälper till att säkerställa att alla delar av den federerade applikationen använder samma version av ett bibliotek, vilket minskar risken för konflikter och oväntat beteende.
Kontroll av delade beroenden
Module Federations konfiguration shared är avgörande för effektiva Micro Frontends. Vilket alternativ beskriver korrekt en viktig fördel med att använda shared-beroenden?
Sammanfattning och nästa steg
Vi har lärt oss varför Module Federations konfiguration shared är viktig för att optimera Micro Frontends. Genom att definiera gemensamma bibliotek som shared förhindrar Ni att de paketeras flera gånger.
Det leder till kortare initiala laddningstider, bättre prestanda och mer konsekventa beroendeversioner i Era federerade applikationer.
Härnäst går vi djupare in på hantering av singleton-moduler och versionshantering för att säkerställa en robust hantering av delade beroenden.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Konsumera delade beroenden” gratis?
Ja – hela texten till ”Konsumera delade beroenden” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Mikrofrontendarkitektur med Module Federation, kan Ni uppgradera till CoddyKit PRO. Kursen i Mikrofrontendarkitektur med Module Federation innehåller totalt 4 lektioner.
Vad lär jag mig i ”Konsumera delade beroenden”?
Lär er att effektivt dela gemensamma bibliotek och beroenden mellan federerade applikationer. Ni övar på Mikrofrontendarkitektur med Module Federation med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Mikrofrontendarkitektur med Module Federation?
Du behöver inga förkunskaper. Utbildningen i Mikrofrontendarkitektur med Module Federation på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Konsumera delade beroenden”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Mikrofrontendarkitektur med Module Federation-lektionen?
Ja. Varje Mikrofrontendarkitektur med Module Federation-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konsumera delade beroenden
- Singleton-moduler och versionshantering
- Dynamisk modulinkoppning
- Dela tillstånd och verktyg mellan remotes