Anvendelse af delte afhængigheder
Bliv fortrolig med effektiv deling af fælles biblioteker og afhængigheder mellem federerede applikationer.
Anvendelse af delte afhængigheder er en gratis Mikrofrontendarkitektur med Module Federation-lektion på CoddyKit. Dette er lektion 1 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 Mikrofrontendarkitektur med Module Federation, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.
Hvorfor dele afhængigheder?
I Micro Frontends kan forskellige dele af din applikation bruge de samme biblioteker, f.eks. React, Vue eller Lodash. Uden omhyggelig håndtering kan hver Micro Frontend pakke sin egen kopi af disse biblioteker.
Det betyder, at brugerne henter den samme kode flere gange, hvilket øger indlæsningstiden og spilder båndbredde. Deling af afhængigheder løser dette problem!
Problemet: Doble bundter
Forestil dig, at din primære 'værtsapplikation' bruger React, og at en 'fjern' Micro Frontend også bruger React. Hvis begge pakker React uafhængigt, ender brugerens browser med at hente React to gange.
- Værtsbundt: Indeholder React
- Fjernbundt: Indeholder React (igen!)
Det fører til større applikationer samlet set og langsommere ydeevne.
Module Federations løsning
Webpacks Module Federation tilbyder en effektiv løsning: konfigurationen shared. Den giver dig mulighed for at angive fælles biblioteker, som skal deles mellem dine federerede applikationer.
Module Federation sørger derefter for, at disse biblioteker kun indlæses én gang, selv om flere Micro Frontends er afhængige af dem.
Konfiguration af `shared`
Du definerer delte afhængigheder i ModuleFederationPlugin i filen webpack.config.js. Egenskaben shared er et objekt, hvor hver nøgle er navnet på et modul, du vil dele.
Her er et grundlæggende eksempel på strukturen:
new ModuleFederationPlugin({
// ... other configs
shared: {
// 'module-name': { options }
'react': { /* ... */ },
'react-dom': { /* ... */ }
}
})Deling med `requiredVersion`
Indstillingen requiredVersion er afgørende for kompatibiliteten. Den angiver det acceptable versionsinterval for en delt afhængighed ved hjælp af semantisk versionsangivelse (f.eks. ^18.0.0).
Module Federation forsøger at bruge en kompatibel version, der allerede er indlæst. Hvis der ikke findes en sådan, eller hvis den er inkompatibel, indlæser den en ny.
shared: {
react: {
requiredVersion: '^18.0.0',
// other options like singleton: true
},
'react-dom': {
requiredVersion: '^18.0.0'
}
}Forklaring af egenskaben `eager`
Normalt indlæses delte moduler asynkront efter behov. Nogle gange er der dog brug for et delt modul med det samme ved opstart, før der overhovedet anmodes om fjernmoduler.
I sådanne tilfælde kan du bruge indstillingen eager: true. Vær forsigtig, da det kan påvirke den indledende indlæsningsydeevne ved at tvinge modulet til at blive indlæst på forhånd.
shared: {
'my-critical-lib': {
requiredVersion: '^1.0.0',
eager: true // Load this module immediately
}
}Konfiguration af `shared` i værts- og fjernapplikationen
Både dine værts- og fjernapplikationer bør typisk definere de samme fælles biblioteker som shared. Det fortæller Module Federation, at disse afhængigheder indgår i den fælles pulje.
Module Federation styrer derefter, hvilken applikation der faktisk indlæser afhængigheden og gør den tilgængelig for de andre, så der kun findes én kopi i browseren.
Praktisk brug af delte afhængigheder
Når react og react-dom er konfigureret som delte, kan din applikationskode importere dem som normalt. Module Federation håndterer den underliggende logik og sørger for, at de indlæses effektivt og kun én gang.
Dette minimale React-indgangspunkt viser, hvordan almindelige importer udnytter delte afhængigheder:
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!");
}Fordele ved at dele biblioteker
- Mindre bundtstørrelser: Forhindrer, at fælles biblioteker duplikeres på tværs af forskellige Micro Frontends, og reducerer dermed direkte den samlede mængde kode, brugerne henter.
- Bedre ydeevne: Mindre kode, der skal hentes, fortolkes og køres, betyder hurtigere indlæsning af den første side og en mere responsiv brugeroplevelse.
- Ensartede versioner: Hjælper med at sikre, at alle dele af din federerede applikation bruger den samme version af et bibliotek, hvilket reducerer risikoen for konflikter og uventet adfærd.
Kontrol af delte afhængigheder
Module Federations konfiguration shared er afgørende for effektive Micro Frontends. Hvilken mulighed beskriver korrekt en vigtig fordel ved at bruge shared-afhængigheder?
Opsummering og næste trin
Vi har lært, at Module Federations konfiguration shared er vigtig for optimering af Micro Frontends. Ved at definere fælles biblioteker som shared forhindrer du, at de pakkes flere gange.
Det giver kortere indledende indlæsningstid, bedre ydeevne og mere ensartede versioner af afhængigheder på tværs af dine federerede applikationer.
Som det næste går vi i dybden med håndtering af singleton-moduler og versionsstyring for at sikre en robust håndtering af delte afhængigheder.
Lær JavaScript 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
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Anvendelse af delte afhængigheder” gratis?
Ja — hele teksten til “Anvendelse af delte afhængigheder” 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 Mikrofrontendarkitektur med Module Federation-kurset, skal du opgradere til CoddyKit PRO. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Anvendelse af delte afhængigheder”?
Bliv fortrolig med effektiv deling af fælles biblioteker og afhængigheder mellem federerede applikationer. Du øver dig i Mikrofrontendarkitektur med Module Federation 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å Mikrofrontendarkitektur med Module Federation?
Der kræves ingen tidligere erfaring. Mikrofrontendarkitektur med Module Federation 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 1 af 4.
Hvor lang tid tager lektionen “Anvendelse af delte afhængigheder”?
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 Mikrofrontendarkitektur med Module Federation-lektion?
Ja. Alle Mikrofrontendarkitektur med Module Federation-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
- Anvendelse af delte afhængigheder
- Singleton-moduler og versionering
- Dynamisk modulindlæsning
- Deling af tilstand og hjælpeværktøjer på tværs af remotes