异步组件--骨架屏案例

异步组件

异步组件可以使用顶层await关键字让组件变得异步
例如const { data } = await axios.get('/url')向后端请求数据,请求到以后展示组件

使用异步组件

<template>
  <Suspense><!--使用Suspense来实现骨架屏 --> 
    <template #default><!--要真正展示的组件 -->
      <SyncVue></SyncVue>
    </template>
    <template #fallback><!--组件信息还在请求,用骨架屏代替 -->
      <selctonVue></selctonVue> <!--骨架屏子组件 -->
    </template>
    
  </Suspense>
</template>

<script>
  const SyncVue = defineAsyncComponent(() => import('@/compontent/sync.vue'))//引入异步组件
</script>

代码分包

当我们pnpm dev build的时候,默认打包在一个js文件中,当项目代码量比较大的时候,首次加载的白屏时间会很长,影响用户体验,然而异步组件不会被编译到主包中,而是当用到此组件的时候才会进行加载,将代码分块分包可以提高性能

写于综合阅览室