在vue2中，使用Vue.component方法来定义异步组件。异步组件允许你延迟加载组件，从而提高应用的初始化加载速度。

1.通过import方式引入

<template>
<Parent />
</template>
<script>
export default {
components: {
  Parent: () => import('xxx.vue)
}
}
</script>

2.使用工厂函数的方式定义异步组件，这个工厂函数定义异步组件， 在组件需要渲染时加载组件。

const asyncComp = () => ({
//异步加载组件
component: () => import('xxx.vue'),
//loading状态显示的组件
loading:LoadingComp,
// 加载失败显示的组件
error: errorComp,
// 组件加载时，延时时间，默认是200ms
delay：200,
// 加载组件超时时间，超时后默认显示error组件
timeout: 3000,
})

vue3中，可以通过defineAsyncComponent方法来定义异步组件。

<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>

异步操作不可避免地会涉及到加载和错误状态，因此 defineAsyncComponent() 也支持在高级选项中处理这些状态

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})

异步组件可以搭配内置的 <Suspense> 组件一起使用