一、异步组件

 * tips: 异步组件打包时会自动分包

1. 引入 defineAsyncComponent 函数

import { defineAsyncComponent } from 'vue'

2. 使用 defineAsyncComponent函数

2.1 defineAsyncComponent接受两种类型的参数：

· 工厂函数，该工厂函数需要返回一个Promise对象

const AsyncCategory = defineAsyncComponent(() => import("./components/AsyncCategory.vue"))

· 接受一个对象类型，对异步函数进行配置

const AsyncCategory = defineAsyncComponent({

    loader: () => import("./components/AsyncCategory.vue"), // 加载

    loadingComponent: Loading, // 占位组件

    errorComponent: Loading, // 加载失败的时候显示的组件

    delay: 2000, // 延迟加载（loadingComponent的延迟）

    /**

    * err: 错误信息，

    * retry: 函数，调用retry尝试重新加载，

    * attempts: 记录尝试次数

    */

    onError: function (err, retry, attempts) {

    }

})

二、Suspense

suspense是一个内置的全局组件，该组件有两个插槽：

default：如果 default 可以显示，那么显示 default 的内容

fallback：如果 default 不能显示，那么显示 fallback插槽的内容