Vue3_06(异步组件)

异步组件 | Vue.js https://v3.cn.vuejs.org/guide/component-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6

Webpack的代码分包

默认的打包过程：
　　默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组件模块打包到一起（比如一个app.js文件中）；
　　这个时候随着项目的不断庞大，app.js文件的内容过大，会造成首屏的渲染速度变慢；

打包时，代码的分包：
　　对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js；
　　这些chunk.js会在需要时从服务器加载下来，并且运行代码，显示对应的内容；

Vue中实现异步组件的方法：defineAsyncComponent 全局 API | Vue.js https://v3.cn.vuejs.org/api/global-api.html#defineasynccomponent

defineAsyncComponent接受两种类型的参数：
　　类型一：工厂函数，该工厂函数需要返回一个Promise对象；
　　类型二：接受一个对象类型，对异步函数进行配置；

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

#2
const AsyncCategory = defineAsyncComponent({
    loader: () => import("./AsyncCategory.vue"),
    loadingComponent: Loading,
    // errorComponent,
    // 在显示loadingComponent组件之前, 等待多长时间
    delay: 2000,
    /**
     * err: 错误信息,
     * retry: 函数, 调用retry尝试重新加载
     * attempts: 记录尝试的次数
     */
    onError: function(err, retry, fail, attempts) {

    }
})

异步组件和Suspense

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

   　default：如果default可以显示，那么显示default的内容；
　   fallback：如果default无法显示，那么会显示fallback插槽的内容

<suspense>
      <template #default>
        <async-category></async-category>
      </template>
      <template #fallback>
        <loading></loading>
      </template>
</suspense>