Vue3 中使用 defineAsyncComponent 延迟加载组件

Posted 2023-03-09

参考技术A

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

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

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

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

这是使用 defineAsyncComponent 的最简单方法，但我们也可以传入一个完整的选项对象，该对象配置了几个更高级的参数。

一般默认就已足够。

我们简单的模拟请求文章数据的 ArticleList.vue 组件：

我们使用 defineAsyncComponent 延迟加载 组件，并使用 Suspense 元素包装这个组件：

默认情况下，我们使用 defineAsyncComponent 定义的所有组件都是可挂起的。

这意味着，如果组件的父链中存在 Suspense ，它将被视为该 Suspense 的异步依赖项。我们的组件加载、错误、延迟和超时选项将被忽略，而将由 Suspense 处理。

最终效果如下：

用户将看到 Loading...，然后在 1s 之后请求完数据后，展示完整的组件。

当创建包含数十个组件的大型项目时， defineAsyncComponent 可能非常有用。当我们使用延迟加载组件时，我们可以加快页面加载时间，改善用户体验，并最终提高应用程序的保留率和转换率。