Vue3：性能优化---异步组件

组件最基本的使用方式

此种方式在打包时，会将子组件的内容一起打包进同一个文件中，影响大型、复杂应用的性能

<template>
  <As></As>
</template>
<script setup lang="ts">
  import As from './async.vue';
</script>

异步组件（普通使用方式）

在打包时，异步组件会被单独抽离出来，打成一个单独的chunk

<template>
  <div>---------动态组件-----------</div>
  <Async></Async>
</template>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
const Async = defineAsyncComponent(() =>
  import('./async.vue')
)
</script>

Suspense

Suspense 是一个试验性的新特性（暂时不要用到生产环境吧~~）

在正确渲染组件之前进行一些异步请求是很常见的事。组件通常会在本地处理这种逻辑，绝大多数情况下这是非常完美的做法。

该 <suspense> 组件提供了另一个方案，允许将等待过程提升到组件树中处理，而不是在单个组件中。

<suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。

结合Suspense实现效果图

异步组件（结合Suspense）

在打包时，异步组件会被单独抽离出来，打成一个单独的chunk

子组件：

<template>
  <div v-for="(item, index) in data.data" :key="index">
    {{ item.name }}
  </div>
</template>
<script setup lang="ts">import { reactive, onBeforeMount } from 'vue';

type Name = {
  name: string
}
type dataObject = {
  data: Name[]
}
// 模拟异步请求
const fun = ():Promise<Name[]> => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        {name:'小明'},
        {name:'丽丽'},
        {name:'小王'}
      ]);
    }, 3000);
  })
}
let data = reactive<dataObject>({data:[]});
onBeforeMount(async()=>{
  data.data= await fun();
})
</script>

父组件：

<template>
  <div>-------异步组件--------</div>
    <Suspense>
      <template #default>
        <Async></Async>
      </template>
      <!-- 在组件没有加载到之前，展示的内容 -->
      <template #fallback>
        <div>
          加载中，请稍后......
        </div>
      </template>
    </Suspense>
</template>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const Async = defineAsyncComponent(()=>import('./async.vue'));
</script>