Vue.js: How do you implement lazy loading?

1<script setup>
2import { defineAsyncComponent } from "vue"
3
4const HeavyComponent = defineAsyncComponent(
5  () => import("./HeavyComponent.vue")
6)
7</script>
8
9<template>
10  <HeavyComponent />
11</template>

1const AsyncComp = defineAsyncComponent({
2  loader: () => import("./Component.vue"),
3  loadingComponent: LoadingSpinner,
4  errorComponent: ErrorDisplay,
5  delay: 200,
6  timeout: 3000
7})

1{
2  path: "/dashboard",
3  component: () => import("./Dashboard.vue")
4}