当代码打包之后,通常会全部打包到app.js里面,这样会造成首屏加载慢,所以得进行分包处理
很简单,引入一个组件这样写即可
const AsyncCategory = defineAsyncComponent(() => import("./AsyncCategory.vue"))
/*
还有一种写法
*/
import Loading from './Loading.vue';
const AsyncCategory = defineAsyncComponent({
loader: () => import("./AsyncCategory.vue"),
loadingComponent: Loading, 占位组件,当AsyncCategory还没加载出来时候,显示这个组件
errorComponent: 当AsyncCategory加载失败出现
delay: 2000, 在显示loadingComponent组件之前, 等待多长时间
/**
* err: 错误信息,
* retry: 函数, 调用retry尝试重新加载
* attempts: 记录尝试的次数
*/
onError: function(err, retry, attempts) {
}
})
suspense这个也是vue提供的内置api
这样使用
<suspense>
<template #default>
<async-category></async-category>
</template>
<template #fallback>
<loading></loading>
</template>
</suspense>