How can you reduce initial load time by lazy loading Vue components?

Vue lazy loading splits bundles using defineAsyncComponent() with dynamic import(), cutting initial load by 50-70%.​

Webpack/Vite auto-chunks import('@components/Component.vue') imports, loading only on render.​
<Suspense> provides seamless loading states for tabs/routes.

Code

<script setup>
import { defineAsyncComponent, Suspense } from 'vue'
const Chart = defineAsyncComponent(() => import('@components/Chart.vue'))
</script>

<template>
  <Suspense>
    <Chart />
    <template #fallback>Loading...</template>
  </Suspense>
</template>