Asynchrone components met defineAsyncComponent
defineAsyncComponent(), loadingComponent, errorComponent en de opties delay en timeout.
Asynchrone components met defineAsyncComponent is een gratis Vue Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.
Waarom asynchrone componenten
Met defineAsyncComponent kun je een component uitgesteld laden — de code wordt pas opgehaald wanneer de component voor het eerst wordt weergegeven.
Hierdoor kun je code op route- en componentniveau opsplitsen, waardoor je eerste bundel kleiner wordt en de eerste weergave sneller plaatsvindt.
De vorm met een laadfunctie
Bij de eenvoudigste toepassing geef je een laadfunctie door die een dynamische import() retourneert. Vite/webpack splitst die import automatisch op in een eigen chunk.
<script setup>
import { defineAsyncComponent } from 'vue'
const SettingsModal = defineAsyncComponent(() =>
import('./SettingsModal.vue')
)
</script>
<template>
<SettingsModal v-if="showSettings" />
</template>De vorm met een optiesobject
Voor meer controle geef je een optiesobject door. De belangrijkste velden zijn:
- loader — de dynamische importfunctie
- loadingComponent — wordt tijdens het laden weergegeven
- errorComponent — wordt weergegeven als het laden mislukt
- delay / timeout — bepalen de timing
import { defineAsyncComponent } from 'vue'
import Loading from './Loading.vue'
import ErrorView from './ErrorView.vue'
const AsyncChart = defineAsyncComponent({
loader: () => import('./Chart.vue'),
loadingComponent: Loading,
errorComponent: ErrorView,
delay: 200,
timeout: 5000
})delay: een flits van een laadindicator voorkomen
De optie delay (standaard 200 ms) bepaalt hoe lang Vue wacht voordat de loadingComponent wordt weergegeven. Als de chunk sneller wordt geladen dan de vertraging, verschijnt er helemaal geen laadindicator.
Stel delay: 0 in om de laadstatus direct weer te geven.
const AsyncPanel = defineAsyncComponent({
loader: () => import('./Panel.vue'),
loadingComponent: Spinner,
// wait 300ms before showing Spinner
delay: 300
})timeout: trage ladingen laten mislukken
De optie timeout stelt de maximale wachttijd in. Als de loader niet binnen timeout ms wordt opgelost, wordt de errorComponent weergegeven en wordt er een fout gelogd.
Standaard is er geen timeout — het laden wacht onbeperkt.
const AsyncReport = defineAsyncComponent({
loader: () => import('./Report.vue'),
errorComponent: ErrorView,
// fail if not loaded within 10s
timeout: 10000
})De onError-callback
De onError-handler wordt uitgevoerd wanneer de loader wordt afgewezen. Deze ontvangt de fout, een functie om het opnieuw te proberen, een functie om te mislukken en het huidige aantal pogingen.
Hier implementeer je logica die bij onbetrouwbare netwerken een beperkt aantal nieuwe pogingen uitvoert.
const AsyncWidget = defineAsyncComponent({
loader: () => import('./Widget.vue'),
onError(error, retry, fail, attempts) {
if (attempts <= 3) {
retry() // try loading again
} else {
fail() // give up, show errorComponent
}
}
})Keuze tussen opnieuw proberen en mislukken
Binnen onError moet je precies één van retry() of fail() aanroepen (of geen van beide; ook dan mislukt het). Een gebruikelijke strategie is om netwerkfouten enkele keren opnieuw te proberen, maar direct te mislukken bij een syntaxfout of chunkfout die opnieuw proberen niet kan verhelpen.
onError(error, retry, fail, attempts) {
const isNetwork = /Loading chunk/.test(error.message)
if (isNetwork && attempts <= 2) {
retry()
} else {
fail()
}
}Combineren met Suspense
Wanneer een asynchrone component binnen een Suspense-foutgrens staat, bepaalt de foutgrens de laadstatus. In dat geval wordt de eigen loadingComponent genegeerd — de terugvalinhoud van Suspense krijgt voorrang.
<template>
<Suspense>
<AsyncChart /> <!-- loadingComponent ignored here -->
<template #fallback>Loading chart...</template>
</Suspense>
</template>Benoemde chunks voor foutopsporing
Je kunt de gegenereerde chunk een naam geven met een speciale opmerking. Daardoor zijn netwerkaanvragen en bundelrapporten gemakkelijker te lezen.
const AsyncEditor = defineAsyncComponent(() =>
import(
/* webpackChunkName: "editor" */
'./RichTextEditor.vue'
)
)Asynchrone componenten en props
Asynchrone componenten accepteren props en geven gebeurtenissen precies zoals normale componenten uit. Vue geeft alles transparant door zodra de echte component is opgelost — je hoeft de aanroepplaats niet te wijzigen.
<template>
<AsyncProfile
:user-id="id"
@save="handleSave"
/>
</template>
<!-- AsyncProfile resolves to the real component, props/events pass through -->Aanpak: laad inhoud boven de vouw zorgvuldig uitgesteld
Laad componenten uitgesteld die buiten beeld staan, achter interacties (modale vensters, tabbladen) of zelden worden gebruikt. Vermijd het uitgesteld laden van kritieke interface boven de vouw — de extra netwerkronde kan de ervaren prestaties verslechteren.
// Good candidate: modal only opened on click
const Modal = defineAsyncComponent(() => import('./Modal.vue'))
// Poor candidate: hero shown immediately on load
// import Hero directly insteadKorte toets
Toets je begrip van defineAsyncComponent.
Samenvatting
Je hebt geleerd hoe je componenten asynchroon laadt met defineAsyncComponent:
- de vorm met een laadfunctie retourneert een dynamische
import()voor het opsplitsen van code - de vorm met opties voegt
loadingComponent,errorComponent,delayentimeouttoe delayvoorkomt een flits van een laadindicator;timeoutlaat trage ladingen mislukkenonError(error, retry, fail, attempts)implementeert logica om opnieuw te proberen of te mislukken- binnen Suspense neemt de terugvalinhoud van de foutgrens de laadinterface over
Leer HTML 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
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “Asynchrone components met defineAsyncComponent” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Asynchrone components met defineAsyncComponent”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.
Wat leer ik in “Asynchrone components met defineAsyncComponent”?
defineAsyncComponent(), loadingComponent, errorComponent en de opties delay en timeout. Je oefent met Vue Academy 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 Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy 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 2 van 4.
Hoe lang duurt de les “Asynchrone components met defineAsyncComponent”?
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 Vue Academy?
Ja. Elke les over Vue Academy 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
- Vue Suspense-component
- Asynchrone components met defineAsyncComponent
- Streaming SSR met renderToWebStream
- Strategieën voor uitgestelde hydration