Vue3 中使用 defineAsyncComponent 延迟加载组件

使用 Vue3 的 defineAsyncComponent 特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。

这是一个改善初始页面加载的好方法，因为我们的应用程序将以较小的块加载，而不必在页面加载时加载每个组件。

什么是 defineAsyncComponent

以下示例来自官网异步组件：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...load component from server
    resolve(/* loaded component */)
  })
})
// ... use `AsyncComp` like a normal component

我们还可以使用 import 从其他文件轻松添加 Vue 组件。

import { defineAsyncComponent } from 'vue'

// 简单用法
const ArticleList = defineAsyncComponent(() =>
  import('&#