vue3之异步组件与代码分包

vue3之异步组件与代码分包

• 使用yarn build | npm run build之后会产生一个dist的包
  • 正常的三个文件 介绍
    
• 若是再页面都是使用同步组件的形式，那么再index.js 这个主包 里 打包的文件也就也来越多，这样导致页面加载速度的缓慢，因此可以把组件拆分为异步组件，代码拆分打包，有利于页面的加载

模拟请求

public / data.json

• 模拟请求数据

[{
    "name": "小菜鸡1"
  },
  {
    "name": "小菜鸡2"
  },
  {
    "name": "小菜鸡3"
  },
  {
    "name": "小菜鸡4"
  }
]

serve.ts

• 创建一个xhr 模拟请求接口

type NameList = {
  name: string
}

export const axios = (url: string): Promise < NameList[] > => {
  return new Promise((resolve) => {
    let xhr: XMLHttpRequest = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        setTimeout(()=> {
          resolve(JSON.parse(xhr.responseText))
        },2000)
        
      }
    }
    xhr.send(null)
  })
}

组件 B.vue

<template>
  <div>
    <div>
      <div v-for="(item, idx) in list" :key="idx">{{ item.name }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { axios } from '../serve'
const list = await axios('./data.json')
console.log('list', list)
</script>
<style lang="scss" scoped></style>

使用 异步 组件 B.vue

• 用Suspense 标签包裹 要加载的异步组件， 里面有着两个插槽，#default是需要渲染的异步的组件，#fallback是渲染前可以定义的loading等

<template>
  <div class="main">
    <Suspense>
      <template #default>
        <B></B>
      </template>
      <template #fallback>
        <div>loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineAsyncComponent } from 'vue'
// import B from './childCom/B.vue' // 同步组件 写法
const B = defineAsyncComponent(() => import('./childCom/B.vue'))
</script>

• 效果：
  
• 打包后的效果