异步组件

在项目中，我们可能会有很多的组件，但是有些组件不需要一开始就加载，而是等到用户仅在需要时再从服务器加载相关组件。

Vue 提供了 defineAsyncComponent 方法来实现此功能；也称异步组件

<template>
    <AsyncComp><AsyncComp/>
</template>

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

const AsyncComp = defineAsyncComponent(() => import('@/components/Sync.vue'))

// 或者使用配置对象形式定义
const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),
  
  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,
  
  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})
</script>

Suspense

<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态

<Suspense> 组件有两个插槽：#default 和 #fallback

• #default插槽为：要展示的组件

• #fallback插槽为：加载过程中的展示, 一般会搭配骨架屏

  <template>
    <Suspense>
      <template #default>
        <SyncVue></SyncVue>
      </template>
      <template #fallback>
        <skeleton></skeleton>
      </template>
    </Suspense>
  </template>
  
  <script setup lang="ts">
  import { defineAsyncComponent } from 'vue'
  
  // 使用异步方式引入组件
  const SyncVue = defineAsyncComponent(() => import('@/components/Sync.vue'))
  
  </script>
  

使用异步组件的好处

使用异步方式引入组件，打包时会生成另外的js文件，不会打入主包内， 可以优化首页加载速度

使用同步方式引入组件（直接import），打包时会直接打入主包内,会造成首屏加载速度缓慢