Vue3.0异步组件suspense,defineAsyncComponent的使用

当代码打包之后，通常会全部打包到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>