在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。其实简单来说就是用到的时候才加载异步组件出来
- 新的
defineAsyncComponent助手方法，用于显式地定义异步组件 component选项被重命名为loader- Loader 函数本身不再接收
resolve和reject参数，且必须返回一个 Promise
使用场景
- 懒加载：异步组件允许将组件的加载延迟到需要的时候，这对于优化初始加载时间非常重要。通过只在组件真正需要使用时才加载它们，可以避免一次性加载所有组件而导致性能下降
- 大型应用场景：当应用程序拥有大量的组件时，同步加载所有组件可能会导致初始加载时间过长。通过使用异步组件，可以分割应用程序的代码，并根据需要按需加载组件，从而提高应用程序的性能。
- 条件加载：某些组件只在特定条件下需要加载，例如在特定路由下才需要加载的组件或在用户执行特定操作后才需要加载的组件。通过使用异步组件，可以根据条件动态加载组件，减少不必要的初始加载。
基本用法
在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能：
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
// ...从服务器获取组件
resolve(/* 获取到的组件 */)
})
})
// ... 像使用其他一般组件一样使用 `AsyncComp`
不带选项的基本使用(ES模板动态导入)
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
import('./components/MyComponent.vue')
)
带选项的基本使用(ES模板动态导入)
const AsyncComp = defineAsyncComponent({
// 加载函数
loader: () => import('./Foo.vue'),
// 加载异步组件时使用的组件
loadingComponent: LoadingComponent,
// 展示加载组件前的延迟时间，默认为 200ms
delay: 200,
// 加载失败后展示的组件
errorComponent: ErrorComponent,
// 如果提供了一个 timeout 时间限制，并超时了
// 也会显示这里配置的报错组件，默认值是：Infinity
timeout: 3000
})
案例
下面有B,C三个组件，B是正常组件引入，C是异步组件引入，B,C组件都是由targetIsVisible来控制是否展示，B，C从页面结果来看是没有任何区别的（点击button展示组件），但是如果我们F12，查看页面加载就会发现两者的区别，由此可见，有条件才展示的组件使用异步组件会更有利于实现最佳性能，加快初始加载速度，减少初始化时的资源占用，适应动态加载，减少代码的冗余性。
参考文章：
