vue 异步组件

一见如故

const Xxx = defineAsyncComponent(() => import('./Xxx.vue'))

• defineAsyncComponent接受一个"返回promise的函数"，返回一个外包装的组件AsyncComp，它的使用是vue内部行为
• 场景：
  1、<AsyncCom v-if=‘flag’ />，让异步组件代码不用立马加载，等需要的时候再加载
  2、AsyncCom + Suspense，让耗时的组件作为异步组件使用，在组件没有完全渲染之前，展示’预展示内容’

---

<AsyncCom v-if=‘flag’ />场景

• 如何实现的按需加载
  异步组件使用的import函数，让异步组件的代码单独分割出来；再加上webpack对分割代码的懒加载（flag=true需要的时候才下载相应的代码）
• 性能上的优化点
  1、非首屏代码不用先加载，加快了首屏渲染
  2、通过异步加载的组件会缓存起来，当下次再用到这个组件时，组件会很快的从缓存中加载出来

AsyncCom + Suspense 场景

// 如果default中不适用异步组件，就不会有'加载中'的展示，直到那个大组件解析完成，才在屏幕上展示
<Suspens>
	<template #default> <AsyncCom/> </template>
	<template #fallback> 加载中 </template>
</Suspense>

全局定义异步组件

app.component('AsyncCom', defineAsyncComponent(() => import('...')))

路由中使用异步组件

{
	path: '',
	name: '',
	component: () => import('../xx.vue')
}