Bruke delte avhengigheter
Lær å dele felles biblioteker og avhengigheter effektivt mellom fødererte applikasjoner.
Bruke delte avhengigheter er en gratis leksjon i Mikrofrontend-arkitektur med Module Federation på CoddyKit. Dette er leksjon 1 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 Mikrofrontend-arkitektur med Module Federation, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.
Hvorfor dele avhengigheter?
I Micro Frontends kan ulike deler av applikasjonen bruke de samme bibliotekene, for eksempel React, Vue eller Lodash. Uten god håndtering kan hver Micro Frontend pakke med sin egen kopi av disse bibliotekene.
Det betyr at brukerne laster ned den samme koden flere ganger, noe som øker innlastingstiden og sløser med båndbredden. Deling av avhengigheter løser dette problemet!
Problemet: Dupliserte pakker
Se for deg at hovedapplikasjonen «Host» bruker React, og at en «Remote» Micro Frontend også bruker React. Hvis begge pakker React separat, ender brukerens nettleser opp med å laste ned React to ganger.
- Host-pakke: Inneholder React
- Remote-pakke: Inneholder React (igjen!)
Dette fører til større applikasjoner totalt sett og dårligere ytelse.
Module Federations løsning
Webpacks Module Federation tilbyr en kraftig løsning: shared-konfigurasjonen. Den lar deg angi felles biblioteker som skal deles mellom de federerte applikasjonene.
Module Federation sørger deretter for at disse bibliotekene bare lastes inn én gang, selv om flere Micro Frontends er avhengige av dem.
Konfigurere `shared`
Du definerer delte avhengigheter i ModuleFederationPlugin i filen webpack.config.js. Egenskapen shared er et objekt der hver nøkkel er navnet på en modul du vil dele.
Slik ser den grunnleggende strukturen ut:
new ModuleFederationPlugin({
// ... other configs
shared: {
// 'module-name': { options }
'react': { /* ... */ },
'react-dom': { /* ... */ }
}
})Dele med `requiredVersion`
Alternativet requiredVersion er avgjørende for kompatibiliteten. Det angir hvilket versjonsområde som er akseptabelt for en delt avhengighet, ved hjelp av semantisk versjonering (for eksempel ^18.0.0).
Module Federation prøver å bruke en kompatibel versjon som allerede er lastet inn. Hvis det ikke finnes en slik versjon, eller den er inkompatibel, laster den inn en ny.
shared: {
react: {
requiredVersion: '^18.0.0',
// other options like singleton: true
},
'react-dom': {
requiredVersion: '^18.0.0'
}
}Forklaring av egenskapen `eager`
Vanligvis lastes delte moduler inn asynkront ved behov. Noen ganger trengs imidlertid en delt modul umiddelbart ved oppstart, før noen remote-moduler i det hele tatt er forespurt.
I slike tilfeller kan du bruke alternativet eager: true. Vær forsiktig, ettersom dette kan påvirke ytelsen ved første innlasting ved å tvinge modulen til å lastes inn på forhånd.
shared: {
'my-critical-lib': {
requiredVersion: '^1.0.0',
eager: true // Load this module immediately
}
}Verts- og remote-konfigurasjoner for `shared`
Både vertsapplikasjonen og remote-applikasjonene bør vanligvis definere de samme felles bibliotekene som shared. Dette forteller Module Federation at disse avhengighetene inngår i den delte ressursmengden.
Module Federation koordinerer deretter hvilken applikasjon som faktisk laster inn avhengigheten, og gjør den tilgjengelig for de andre, slik at det bare finnes én kopi i nettleseren.
Praktisk bruk av delte avhengigheter
Når react og react-dom er konfigurert som delte, kan applikasjonskoden importere dem som vanlig. Module Federation håndterer logikken i bakgrunnen for å sikre at de lastes inn effektivt og bare én gang.
Dette minimale React-inngangspunktet viser hvordan standardimporter benytter delte avhengigheter:
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!");
}Fordeler ved å dele biblioteker
- Mindre pakkestørrelser: Hindrer at felles biblioteker dupliseres på tvers av ulike Micro Frontends, og reduserer dermed den totale mengden kode brukerne må laste ned.
- Bedre ytelse: Mindre kode å laste ned, tolke og kjøre betyr raskere innlasting av siden og en mer responsiv brukeropplevelse.
- Konsekvente versjoner: Bidrar til at alle deler av den federerte applikasjonen bruker samme versjon av et bibliotek, noe som reduserer risikoen for konflikter og uventet oppførsel.
Sjekk av delte avhengigheter
Module Federations shared-konfigurasjon er avgjørende for effektive Micro Frontends. Hvilket alternativ beskriver riktig en viktig fordel ved å bruke shared-avhengigheter?
Oppsummering og neste steg
Vi har lært at Module Federations shared-konfigurasjon er viktig for å optimalisere Micro Frontends. Ved å definere felles biblioteker som shared hindrer du at de pakkes inn flere ganger.
Dette gir kortere innlastingstid i starten, bedre ytelse og mer konsekvente avhengighetsversjoner på tvers av de federerte applikasjonene.
Deretter skal vi se nærmere på håndtering av singleton-moduler og versjonering for å sikre robust håndtering av delte avhengigheter.
Lær deg JavaScript 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
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Bruke delte avhengigheter» gratis?
Ja – hele teksten i «Bruke delte avhengigheter» 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 Mikrofrontend-arkitektur med Module Federation-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.
Hva lærer jeg i «Bruke delte avhengigheter»?
Lær å dele felles biblioteker og avhengigheter effektivt mellom fødererte applikasjoner. Du øver på Mikrofrontend-arkitektur med Module Federation 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 Mikrofrontend-arkitektur med Module Federation?
Ingen tidligere erfaring er nødvendig. Mikrofrontend-arkitektur med Module Federation 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 1 av 4.
Hvor lang tid tar leksjonen «Bruke delte avhengigheter»?
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 Mikrofrontend-arkitektur med Module Federation-leksjonen?
Ja. Alle Mikrofrontend-arkitektur med Module Federation-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
- Bruke delte avhengigheter
- Singleton-moduler og versjonering
- Dynamisk lasting av moduler
- Dele tilstand og verktøy på tvers av remotes