23. 异步组件

为什么需要异步组件

默认情况下，所有组件在一开始就加载。如果应用很大，首屏加载的 JS 就会很多，用户等得久。

异步组件可以”按需加载”——只有组件真正要显示时才去拉取它的代码。这就是代码分割的核心思想。

基本用法

Vue 提供了 defineAsyncComponent 函数：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // 从服务器加载组件
    resolve(/* 加载到的组件 */)
  })
})

实际开发中，通常结合 ES 模块的动态 import：

import { defineAsyncComponent } from 'vue'

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

得到的 AsyncComp 是一个”包装组件”。它和正常组件一样使用，但只在首次渲染时才去加载内部组件：

<template>
  <AsyncComp />
</template>

注册异步组件

异步组件可以像普通组件一样注册：

// 全局注册
app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

也可以在父组件内部直接声明：

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

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>

加载中和错误状态

异步加载涉及网络请求，总有等待和失败。defineAsyncComponent 支持高级配置：

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

  // 加载中显示的组件
  loadingComponent: LoadingSpinner,

  // 显示加载组件前的延迟，默认 200ms
  delay: 200,

  // 加载失败显示的组件
  errorComponent: ErrorDisplay,

  // 超时时间，默认 Infinity
  timeout: 3000
})

各参数作用：

参数	说明
loader	加载组件的函数
loadingComponent	加载中显示的组件
delay	多久后显示加载组件（防止快网络下的闪烁）
errorComponent	加载失败显示的组件
timeout	超时时间，超时后显示错误组件

配合 Suspense 使用

异步组件可以和 <Suspense> 内置组件配合使用。<Suspense> 能统一管理多个异步组件的加载状态：

<template>
  <Suspense>
    <template #default>
      <AsyncCompA />
      <AsyncCompB />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

Suspense 会等内部所有异步组件都加载完成后，才替换掉 fallback 内容。具体用法后面的章节会详细介绍。

什么时候用异步组件

场景	是否用异步
首屏核心组件	不用
路由页面组件	推荐
大型弹窗/抽屉	推荐
后台管理页面	推荐
Tab 中不常用的面板	推荐

简单的判断：不在首屏首屏显示的大块组件，都可以异步加载。

本节回顾

• defineAsyncComponent 实现组件按需加载
• 通常结合动态 import() 使用
• 支持 loadingComponent 和 errorComponent 处理中间状态
• delay 防止快网络下的加载闪烁
• 配合 <Suspense> 管理多个异步组件