javascript / intermediate
Snippet
Lazy Loading von Komponenten mit defineAsyncComponent
defineAsyncComponent ermöglicht es Ihnen, Komponenten erst dann zu laden, wenn sie tatsächlich benötigt werden. Dies reduziert die anfängliche Bundle-Größe und verbessert die 'Time to Interactive' bei großen Anwendungen erheblich.
snippet.js
javascript
1
2
3
4
5
6
7
8
import { defineAsyncComponent } from 'vue';const AsyncChart = defineAsyncComponent({loader: () => import('./components/BigChart.vue'),loadingComponent: LoadingSpinner,delay: 200,timeout: 3000});
vue
Erklärung
1
loader: () => import(...)
Eine Funktion, die ein Promise für die Komponentendatei zurückgibt und Code-Splitting ermöglicht.
2
loadingComponent
Eine Komponente, die angezeigt wird, während die asynchrone Komponente über das Netzwerk geladen wird.