javascript / intermediate
Snippet
Lazy Loading Components with defineAsyncComponent
defineAsyncComponent allows you to load components only when they are actually needed. This reduces the initial bundle size and significantly improves the 'Time to Interactive' for large applications.
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
Breakdown
1
loader: () => import(...)
A function that returns a Promise for the component file, enabling code splitting.
2
loadingComponent
A component to display while the async component is being fetched over the network.