Gedeelde dependencies gebruiken
Leer hoe u gemeenschappelijke libraries en dependencies efficiënt deelt tussen gefedereerde applicaties.
Gedeelde dependencies gebruiken is een gratis Architectuur van micro-frontends met Module Federation-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Architectuur van micro-frontends met Module Federation. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.
Waarom afhankelijkheden delen?
In Micro Frontends kunnen verschillende onderdelen van je toepassing dezelfde bibliotheken gebruiken, zoals React, Vue of Lodash. Zonder zorgvuldig beheer kan elke Micro Frontend een eigen kopie van deze bibliotheken bundelen.
Dit betekent dat gebruikers dezelfde code meerdere keren downloaden, waardoor laadtijden toenemen en bandbreedte wordt verspild. Het delen van afhankelijkheden lost dit probleem op!
Het probleem: dubbele bundels
Stel je voor dat je belangrijkste 'Host'-toepassing React gebruikt en dat een 'Remote' Micro Frontend ook React gebruikt. Als beide React onafhankelijk bundelen, downloadt de browser van je gebruiker React uiteindelijk twee keer.
- Host-bundel: bevat React
- Remote-bundel: bevat React (nogmaals!)
Dit leidt tot grotere toepassingen in het algemeen en tragere prestaties.
De oplossing van Module Federation
Webpack's Module Federation biedt een krachtige oplossing: de configuratie shared. Hiermee kun je algemene bibliotheken opgeven die door je gefedereerde toepassingen moeten worden gedeeld.
Module Federation zorgt er vervolgens voor dat deze bibliotheken slechts één keer worden geladen, ook als meerdere Micro Frontends ervan afhankelijk zijn.
<code>shared</code> configureren
Je definieert gedeelde afhankelijkheden binnen ModuleFederationPlugin in je bestand webpack.config.js. De eigenschap shared is een object waarin elke sleutel de naam is van een module die je wilt delen.
Zo ziet de basisstructuur eruit:
new ModuleFederationPlugin({
// ... other configs
shared: {
// 'module-name': { options }
'react': { /* ... */ },
'react-dom': { /* ... */ }
}
})Delen met <code>requiredVersion</code>
De optie requiredVersion is cruciaal voor compatibiliteit. Deze geeft met semantische versiebeheer de toegestane versiereeks voor een gedeelde afhankelijkheid op (bijvoorbeeld ^18.0.0).
Module Federation probeert een compatibele versie te gebruiken die al is geladen. Als die niet bestaat of niet compatibel is, wordt een nieuwe versie geladen.
shared: {
react: {
requiredVersion: '^18.0.0',
// other options like singleton: true
},
'react-dom': {
requiredVersion: '^18.0.0'
}
}De eigenschap <code>eager</code> uitgelegd
Normaal gesproken worden gedeelde modules asynchroon en op aanvraag geladen. Soms is een gedeelde module echter direct bij het opstarten nodig, voordat er externe modules zijn aangevraagd.
In zulke gevallen kun je de optie eager: true gebruiken. Wees voorzichtig, want dit kan de prestaties bij het eerste laden beïnvloeden doordat de module meteen wordt geladen.
shared: {
'my-critical-lib': {
requiredVersion: '^1.0.0',
eager: true // Load this module immediately
}
}<code>shared</code>-configuraties van host en externe toepassing
Zowel je hosttoepassing als je externe toepassingen moeten doorgaans dezelfde algemene bibliotheken als shared definiëren. Hiermee geef je Module Federation aan dat deze afhankelijkheden deel uitmaken van de gedeelde verzameling.
Module Federation bepaalt vervolgens welke toepassing de afhankelijkheid daadwerkelijk laadt en beschikbaar maakt voor de andere toepassingen, zodat er maar één kopie in de browser bestaat.
Praktisch gebruik van gedeelde afhankelijkheden
Wanneer react en react-dom als gedeeld zijn geconfigureerd, kan je toepassingscode ze gewoon zoals gebruikelijk importeren. Module Federation handelt de onderliggende logica af om ervoor te zorgen dat ze efficiënt en slechts één keer worden geladen.
Dit minimale React-toegangspunt laat zien hoe standaardimports gebruikmaken van gedeelde afhankelijkheden:
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!");
}Voordelen van bibliotheken delen
- Kleinere bundelgroottes: Voorkomt dat algemene bibliotheken in verschillende Micro Frontends worden gedupliceerd en vermindert zo rechtstreeks de totale hoeveelheid code die gebruikers downloaden.
- Betere prestaties: Minder code om te downloaden, te parseren en uit te voeren betekent een snellere eerste paginalading en een responsievere gebruikerservaring.
- Consistente versies: Helpt ervoor te zorgen dat alle onderdelen van je gefedereerde toepassing dezelfde versie van een bibliotheek gebruiken, waardoor mogelijke conflicten en onverwacht gedrag worden beperkt.
Controle van gedeelde afhankelijkheden
De configuratie shared van Module Federation is cruciaal voor efficiënte Micro Frontends. Welke optie beschrijft correct een belangrijk voordeel van het gebruik van shared-afhankelijkheden?
Herhaling en volgende stappen
We hebben geleerd dat de configuratie shared van Module Federation essentieel is voor het optimaliseren van Micro Frontends. Door algemene bibliotheken als shared te definiëren, voorkom je dat ze meerdere keren worden gebundeld.
Dit leidt tot kortere eerste laadtijden, betere prestaties en consistentere versies van afhankelijkheden in je gefedereerde toepassingen.
Vervolgens gaan we dieper in op het beheren van singletonmodules en versiebeheer, zodat gedeelde afhankelijkheden robuust worden beheerd.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Gedeelde dependencies gebruiken” gratis?
Ja — de volledige tekst van “Gedeelde dependencies gebruiken” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Architectuur van micro-frontends met Module Federation wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.
Wat leer ik in “Gedeelde dependencies gebruiken”?
Leer hoe u gemeenschappelijke libraries en dependencies efficiënt deelt tussen gefedereerde applicaties. Je oefent met Architectuur van micro-frontends met Module Federation door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Architectuur van micro-frontends met Module Federation te beginnen?
Ervaring vooraf is niet nodig. Architectuur van micro-frontends met Module Federation op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Gedeelde dependencies gebruiken”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Architectuur van micro-frontends met Module Federation?
Ja. Elke les over Architectuur van micro-frontends met Module Federation bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Gedeelde dependencies gebruiken
- Singleton-modules en versiebeheer
- Modules dynamisch laden
- State en hulpprogramma's delen tussen remotes