Example of using Vue3 asynchronous components

Importing and using components that are not commonly used in the project in the form of asynchronous components is a step in our project optimization . The code of asynchronous components is packaged separately when the project is packaged, which can form a "subpackage" mechanism, thereby shortening the first loading time of the project , to improve user experience, here is an example of the use of asynchronously imported components in 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>