提高效率-分包（异步组件）

[
    {
        "name": "A"
    },
    {
        "name": "B"
    },
    {
        "name": "C"
    }
]

JSON数据源

 export type nameList = {
    name: string
}

export const axios = (url: string): Promise<nameList[]> => {
    return new Promise((resolve, reject) => {
        let xhl: XMLHttpRequest = new XMLHttpRequest();
        xhl.open("GET", url);

        xhl.onreadystatechange = () => {
            if (xhl.readyState === 4 && xhl.status === 200) {
                setTimeout(() => {
                    resolve(JSON.parse(xhl.responseText));
                }, 2000);
                
            }
        }
        xhl.send(null)
    })
}

severe.ts封装请求

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

<script setup lang="ts">
import {axios} from './severe';
const list=await axios('./data.json')
console.log(list);


</script>

<style scoped>

</style>

组件引入数据

<Suspense>
    <template #default>
      <A></A>
    </template>
    <template #fallback>
      <div>loding</div>
    </template>
  </Suspense>

父组件引入 需要包个标签Suspense 里面有自带的两个插槽 一个是defaut是加载完成渲染组件，一个是fallback，加载中渲染

分包后会多一个js文件，提高效率