【Vue3 第二十章】异步组件 & 代码分包 & Suspense内置组件 & 顶层 await

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

一、概述

在大型项目中，我们可能需要拆分应用为更小的块，以减少主包的体积，并仅在需要时再从服务器加载相关组件。这时候就可以使用异步组件。

Vue 提供了 defineAsyncComponent 方法来实现此功能，这个方法接收一个返回 Promise 的加载函数。

ES 模块动态导入会返回一个 Promise，所以多数情况下我们会将它和 defineAsyncComponent 搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点)，因此我们也可以用它来导入 Vue 单文件组件。

1.1 组件内注册异步组件（局部注册）

<script setup>
	import { defineAsyncComponent } from 'vue'

    const AsyncComp = defineAsyncComponent(() =>
      import('./components/MyComponent.vue')
    )
</script>
<template>
  <AsyncComp />
</template>

得到的 AsyncComp 是一个外层包装过的组件，仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将接收到的 props 和插槽传给内部组件，所以你可以使用这个异步的包装组件无缝地替换原始组件，同时实现延迟加载。

1.2 全局注册异步组件

与普通组件一样，异步组件可以使用 app.component() 全局注册

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

二、代码分包 & 高级选项配置

2.1 代码分包

父组件引用子组件，通过 defineAsyncComponent 加载异步配合 import 函数模式便可以分包，先执行 npm run build 指令，观察异步加载组件打包后 dist 目录文件。

import { defineAsyncComponent } from 'vue'
const Child = defineAsyncComponent(() => import('../../components/Child/index.vue'))

然后修改代码为组件同步引入时，再执行 npm run build 指令，观察打包后 dist目录下文件的变化。

import Child from '../../components/Child/index.vue'

2.2 高级选项配置

defineAsyncComponent()提供了高级选项处理一些其它的操作，如：加载状态、错误状态、延迟时间、超时时间等配置

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})

三、Suspense内置组件（了解）

异步组件可以搭配内置的 <Suspense> 组件一起使用，

<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。如果在渲染时遇到异步依赖项 (异步组件和具有 async setup()的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。

<Suspense> 接受两个插槽：#default 和 #fallback。它将在内存中渲染默认插槽的同时展示后备插槽内容。

<Suspense>
    <template #default>
        <Dialog>
            <template #default>
                <div>我在哪儿</div>
            </template>
        </Dialog>
    </template>

    <template #fallback>
        <div>loading...</div>
    </template>
</Suspense>

# 或

<Suspense>
  <!-- 具有深层异步依赖的组件 -->
  <Dashboard />

  <!-- 在 #fallback 插槽中显示 “正在加载中” -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

四、顶层 await

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

<script setup>
	const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>

async setup() 必须与 Suspense 内置组件组合使用，Suspense 目前还是处于实验阶段的特性，会在将来的版本中稳定。