使用 Vue3 的 defineAsyncComponent
特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。这是一个改善初始页面加载的好方法,因为我们的应用程序将以较小的块加载,而不必在页面加载时加载每个组件。
在webpack打包过程中,除了第三方的包,默认是全部打包到app.js文件中。这样会导致首屏加载过慢,白屏时间过长,可以使用v3提供的defineAsyncComponent API进行配置,使打包时分包,加载时按需导入,和路由懒加载是一个意思。
defineAsyncComponent
方法接收一个返回 Promise 的加载函数。这个 Promise 的 resolve
回调方法应该在从服务器获得组件定义时调用。可以调用 reject(reason)
表明加载失败。
ES 模块动态导入也会返回一个 Promise,所以多数情况下我们会将它和 defineAsyncComponent
搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点),因此我们也可以用它来导入 Vue 单文件组件
//组件局部注册使用
<script setup>
import { defineAsyncComponent } from 'vue'
const AdminPage = defineAsyncComponent(() =>
import('./components/AdminPageComponent.vue')
)
</script>
<template>
<AdminPage />
</template>
//全局注册,可以直接使用
app.component('MyComponent', defineAsyncComponent(() =>
import('./components/MyComponent.vue')
))
异步操作不可避免地会涉及到加载和错误状态,因此 defineAsyncComponent()
也支持在高级选项中处理这些状态:
const AsyncComp = defineAsyncComponent({
// 加载函数
loader: () => import('./Foo.vue'),
// 加载异步组件时使用的组件
loadingComponent: LoadingComponent,
// 展示加载组件前的延迟时间,默认为 200ms
delay: 200,
// 加载失败后展示的组件
errorComponent: ErrorComponent,
// 如果提供了一个 timeout 时间限制,并超时了
// 也会显示这里配置的报错组件,默认值是:Infinity
timeout: 3000
})
如果提供了一个加载组件,它将在内部组件加载时先行显示。在加载组件显示之前有一个默认的 200ms 延迟——这是因为在网络状况较好时,加载完成得很快,加载组件和最终组件之间的替换太快可能产生闪烁,反而影响用户感受。
如果提供了一个报错组件,则它会在加载器函数返回的 Promise 抛错时被渲染。你还可以指定一个超时时间,在请求耗时超过指定时间时也会渲染报错组件。
通常suspense配合异步组件使用。在组件中定义一个不会被分包的组件,直接引入的组件。如果异步组件没有显示则显示同步组件
<template>
<suspense>
<!-- 具名插槽 -->
<template #default>
<Son/>
</template>
<template #fallback>
<Loading/>
</template>
</suspense>
</template>
<script setup lang='ts'>
import {defineAsyncComponent} from "vue";
import Loading from './components/Loading.vue'//直接导入不会分包
const Son = defineAsyncComponent(() => import('./components/Loading.vue'))//异步组件会进行分包
</script>
涉及问题:既然有路由懒加载了,为什么vue还要出异步加载组件的API?
虽然 Vue Router 提供了路由懒加载的功能,但 Vue 引入异步加载组件的 API 的目的是为了更细粒度地控制和管理组件的加载。
异步加载组件的 API(如import()
)可以在任何地方动态地加载组件,而不仅仅局限于路由。这意味着你可以根据需要在组件之间进行异步加载,而不仅仅是在路由切换时。
这对于优化应用程序的性能和资源利用是非常有用的。通过按需加载组件,你可以将应用程序初始加载的负载减少到最低,并在需要时按需加载必要的组件。这可以提升初始加载速度,并减少不必要的网络请求和资源占用。
此外,异步加载组件的 API 还可以与其他开发模式和工具(比如动态管理状态、按需加载插件等)结合使用,以实现更灵活的应用程序开发和管理。
因此,尽管 Vue Router 提供了路由懒加载的功能,Vue 还额外引入了异步加载组件的 API,以提供更多灵活的组件加载方式和更细粒度的控制。