v3 异步组件及分包使用

1  app.vue

<template>

  <!-- vue3异步组件必须使用suspense -->

  <Suspense>

    <template #default>

      <!-- 异步组件 -->

      <SyncVue></SyncVue>

    </template>

    <template v-slot:fallback>

      <!-- 优先显示骨架屏 -->

      <skeleton></skeleton>

    </template>

  </Suspense>

</template>

<script setup >

import { ref,reactive, defineAsyncComponent } from 'vue';

import skeleton from  './components/sync/skeleton.vue';

//异步组件打包--可以单独多打出来一个【大型项目一个包加载比较慢】

const SyncVue = defineAsyncComponent(()=> import('./components/sync/sync.vue'))

</script>

2 sync.vue

<template>

  <div>

    <slot>

        异步组件1

        <div v-for="item i