父组件
1.引入子组件必须使用defineAsyncComponent
//import() 函数形式引入
const SyncVue = defineAsyncComponent(()=>import('@/components/sync.vue'))
2.展示异步组件必须使用<Suspense></Suspense>
<Suspense>
<template #default>
<SyncVue></SyncVue>
</template>
<!-- 显示加载的时候组件 -->
<template #fallback>
<SkeletonVue></SkeletonVue>
</template>
</Suspense>
3.好处
前端性能优化方面:
使用异步组件,build后会出现单独的syncjs 文件,是主包内容减小,在需要的时候才会加载一步组件,