Vue 3.x 异步组件 减少白屏

Question

使用方式：需要结合 suspense 组件、 defineAsyncComponent 、 import 方法使用

作用：程序优化。将应用分割成小一些的代码块，并且减少主包的体积，减少屏幕白屏时间。(build 打包时会将异步组件单独打包)

顶层 await

<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()

<template>
    <div>
        {{ data}}
    </div>
</template>
<script lang="ts" setup>
const request = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(11111)
        }, 3000)
    })
}
const data = await request();
</script>

父组件引用子组件 通过 defineAsyncComponent 加载异步配合 import 函数模式便可以分包

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

const Child = defineAsyncComponent(() => import('child.vue'))
</script>

suspense

<template>
    <suspense>
      <template #default>
        <Child />
      </template>
      <template #fallback>
        <div>
          loading....
        </div>
      </template>
    </suspense>
</template>