异步组件
在引入模块的时候使用import()，webpack会对该模块进行分包操作，这样可以避免全部代码集成到一个js文件，导致文件过大，请求过慢影响用户体验。
// 通过import函数导入模块，返回一个Promise，后续webpack打包的时候就会对其进行分包操作
import("./utils/math").then(res=>{
console.log(res.sum(1, 2));
})
同理，如果组件全都打包到一个文件，也会导致请求过慢。使用异步组件可以进行代码分包，需要的时候再请求加载，类似懒加载，可以提高首屏加载速度。
// vue3定义异步组件的方法，需导入
import { defineAsyncComponent } from "vue"
// 常规写法，注意这个组件名也需要写到components:{}里才能使用
const AsyncComponent = defineAsyncComponent(()=>import("./components/AsyncCom.vue"))
// 延展写法，用的比较少，了解即可
const AsyncComponent = defineAsyncComponent({
loader: ()=>import("./components/AsyncCom.vue"),
loadingComponent: Loading, // 组件还没加载时展示的占位组件，浏览器切换低速3G可以看到
errorComponent: ErrorComponent, // 组件加载失败时展示的占位组件
delay: 2000, // 显示loadingComponent组件之前等待的时间，2s还没请求成功才会显示loading组件
// err: 错误信息, retry: 函数,调用的时候会重新加载组件 fail: 函数，调用时不在加载组件了直接退出 attemps: 记录尝试的次数
onError: (err, retry, fail, attemps)=>{}
})
Suspense
真实开发中，异步组件会与另一个Suspense组件一起使用。
Suspense有两个插槽，name分别为default和fallback， 如果default内容可以正常显示，则显示default的内容，否则显示fallback的内容。
<Suspense>
<template #default>
<AsyncComponent></AsyncComponent>
</template>
<template #fallback>
<Loading></Loading>
</template>
</Suspense>
