Vue3 异步组件使用示例

将项目中不常用的组件以异步组件形式导入使用是我们项目优化的一个步骤，异步组件的代码项目打包时是分开打包的，能形成一个“分包”的机制，从而缩短项目的首次加载时间，提升用户体验，这里记录下 Vue3 中异步导入组件的使用示例：

<template>
<div>
  <!-- 异步组件必须要放在 Suspense 内置组件中进行渲染 -->
  <Suspense>
    <!-- 默认插槽用于显示异步组件 -->
    <template #default>
      <About></About>
    </template>
    <!-- fallback 插槽用于显示异步组件加载期间的代替组件（一般可以放一个骨架屏组件） -->
    <template #fallback>
      <h1>loading...</h1>
    </template>

  </Suspense>
</div>
</template>

<script setup lang='ts'>
import {defineAsyncComponent } from 'vue';
// 使用 defineAsyncComponent 引入需要异步加载的组件
const About = defineAsyncComponent(() => import('@/components/About/index.vue'))

</script>

<style scoped>

</style>