Modules dynamisch laden
Implementeer het dynamisch laden van remotemodules om de initiële laadtijd te verkorten en het resourcegebruik te optimaliseren.
Modules dynamisch laden is een gratis Architectuur van micro-frontends met Module Federation-les op CoddyKit. Dit is les 3 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.
Wat is dynamisch laden?
Bij het bouwen van grote webtoepassingen, vooral met micro-frontends, kan het laden van alles tegelijk ervoor zorgen dat je app traag opstart. Daar komt het dynamisch laden van modules goed van pas!
Dit is een techniek waarmee je delen van je toepassing pas laadt wanneer ze daadwerkelijk nodig zijn, in plaats van vooraf.
Waarom dynamisch laden voor micro-frontends?
In een micro-frontendarchitectuur zijn verschillende teams eigenaar van verschillende delen van de gebruikersinterface. Vaak werkt een gebruiker op een bepaald moment maar met één of twee micro-frontends.
- Betere prestaties: Download alleen de code voor de micro-frontends die momenteel in beeld zijn.
- Sneller aanvankelijk laden: Verklein de grootte van de initiële bundel, zodat je toepassing sneller reageert.
- Geoptimaliseerd gebruik van bronnen: Bespaar bandbreedte en geheugen door ongebruikte modules niet te laden.
De dynamische functie `import()`
De kern van dynamisch laden in JavaScript is de functie import(). Dit is speciale syntaxis waarmee je modules asynchroon kunt importeren.
Wanneer je import() gebruikt, maakt Webpack (en andere bundelaars) automatisch een afzonderlijke 'chunk' voor die module. Deze chunk wordt pas geladen wanneer de aanroep van import() wordt uitgevoerd.
Hoe werkt `import()`?
De functie import() retourneert een Promise. Dat betekent dat je .then() en .catch() kunt gebruiken om de geladen module of mogelijke fouten af te handelen.
Je kunt ook async/await gebruiken voor een overzichtelijkere syntaxis bij asynchrone bewerkingen.
De rol van Webpack bij dynamische imports
Webpack is slim! Wanneer het een aanroep van import() ziet, weet het dat het de geïmporteerde module als een splitsingspunt moet behandelen.
Dit betekent dat het een afzonderlijk JavaScript-bestand (een 'chunk') maakt voor die module en de bijbehorende afhankelijkheden. Deze chunk wordt pas tijdens runtime van de server opgehaald wanneer de aanroep van import() wordt geactiveerd.
Dynamisch laden van externe modules
In Module Federation geldt dynamisch laden ook voor externe modules. In plaats van alle externe modules op te geven die bij het opstarten moeten worden geladen, kun je instellen dat ze alleen worden geladen wanneer ze expliciet via import() worden aangevraagd.
Dit is bijzonder krachtig voor grote gefedereerde toepassingen, omdat je daarmee echt on-demand micro-frontends kunt bouwen.
Hostapp: voorbeeld van dynamisch laden
Probeer dit eenvoudige voorbeeld uit te voeren. Let erop dat het bericht 'feature' na een korte vertraging verschijnt, waarmee asynchroon laden wordt nagebootst. In een echte micro-frontendtoepassing zou hiermee een externe component worden opgehaald.
console.log("App starts.");
async function loadFeature() {
console.log("Loading feature dynamically...");
try {
// In a real MFE, this would be:
// const { renderFeature } = await import('remoteApp/Feature');
// Simulating a module that resolves immediately
const simulatedModule = {
default: () => console.log("Feature 'A' loaded and activated!")
};
// Simulate the async delay of a real network request
await new Promise(resolve => setTimeout(resolve, 1000));
simulatedModule.default();
console.log("Feature loading complete.");
} catch (error) {
console.error("Failed to load feature:", error);
}
}
// Trigger dynamic loading after initial app setup
setTimeout(loadFeature, 500);
console.log("Initial app setup done.");Laadtoestanden afhandelen
Omdat dynamisch laden asynchroon verloopt, is er een korte periode waarin de module via het netwerk wordt opgehaald.
Voor een goede gebruikerservaring is het essentieel om gedurende deze periode een laadindicator (bijvoorbeeld een spinner of skeletscherm) te tonen. Zo voorkom je dat de gebruikersinterface niet-reagerend lijkt.
Fouten afhandelen bij dynamische imports
Wat gebeurt er als een dynamisch geladen module niet kan worden geladen? Misschien door een netwerkfout, een ongeldig pad of een externe server die niet beschikbaar is?
Plaats je dynamische aanroepen van import() altijd in een blok try...catch of gebruik de methode .catch() van de Promise om deze fouten netjes af te handelen. Je kunt een foutmelding of een terugvalinterface tonen.
Belangrijkste prestatievoordelen
Samengevat verbetert het dynamisch laden van modules de prestaties van je toepassing aanzienlijk:
- Kleinere initiële bundel: Alleen essentiële code wordt vooraf geladen.
- Snellere tijd tot interactie (TTI): Gebruikers kunnen eerder met de belangrijkste delen van je app werken.
- Beter gebruik van bronnen: Minder netwerkverkeer en geheugengebruik voor functies die momenteel niet worden gebruikt.
- Betere gebruikerservaring: Een snellere en responsievere toepassing.
Controle: dynamisch laden
Welke van de volgende punten zijn belangrijke voordelen van het implementeren van dynamisch laden van modules in een micro-frontendtoepassing?
Samenvatting: dynamisch laden
Goed gedaan! In deze les hebben we dynamisch laden van modules verkend als een belangrijke techniek voor het optimaliseren van micro-frontends. We hebben geleerd over de functie import(), hoe Webpack hiermee omgaat en welke voordelen dit biedt voor prestaties en gebruikerservaring.
Door modules alleen te laden wanneer dat nodig is, kun je efficiëntere en responsievere gefedereerde toepassingen bouwen. Vergeet niet om laadtoestanden en mogelijke fouten af te handelen voor een robuuste gebruikerservaring!
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 “Modules dynamisch laden” gratis?
Ja — de volledige tekst van “Modules dynamisch laden” 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 “Modules dynamisch laden”?
Implementeer het dynamisch laden van remotemodules om de initiële laadtijd te verkorten en het resourcegebruik te optimaliseren. 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 3 van 4.
Hoe lang duurt de les “Modules dynamisch laden”?
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