vue3 - 16.suspense/代码分包/性能优化

项目npm打包：npm run build，打包成功之后会生成一个dist文件夹

项目白屏优化方案：

声明异步组件的方法：

当我们在页面中声明异步组件，我们就不能像传统的那样直接import组件了，这个时候我们需要用defineAsyncComponent方法，他是一个回调函数，里面直接import方法

并且配合vue3内置组件<Suspense>里面通过插槽的形式，在default中放入我们的组件，在fallback中可以做一些修饰，比如引入公共组件loading正在加载中动画，也可以不写，这样就可以实现，当我们npm run build的时候，会重新拆分出去，从而减少vendor.js的大小，另一方面是当请求数据的时候，当数据没有加载出来的时候，会出现白屏，这个时候我们可以进行白屏处理：

index页面：

<template>
  <div>
    <Suspense>
      <template #default>
        <sectionCom />
      </template>
      <template #fallback>
        loading...
      </template>
    </Suspense>
  </div>
</template>
<script setup lang='ts'>
  im