【Vue3】 第十五部分 异步组件与suspense的使用(性能优化)

【Vue3】 第十五部分 异步组件与suspense的使用(性能优化)

---

---

15. 异步组件与suspense的使用(性能优化)

异步组件是vue性能优化的一种方式，主要目的是为了解决页面引入很多组件导致打包后的js体积过大，同样条件下，文件体积越大，请求耗时越长，容易出现白屏的现象.

vue提供了异步组件，当页面中通过异步方式来声明（全局）或者注册（局部）组件时，每个异步组件会被单独打包成一个js文件，每个异步组件对应的js文件在需要时才会被加载。通过减小打包文件体积的方式实现了性能优化。

<script lang="ts" setup>
    // 首先导入defineAsyncComponent
    import { defineAsyncComponent} from 'vue';
    // 这是普通引入
    // import asyncCom from "../components/asyncCom.vue";

    // 变成异步组件,这样做在打包的时候就会单独打包一份js文件,对应的js文件在需要时才会被加载
    const asyncCom = defineAsyncComponent(()=>import('../components/asyncCom.vue'))
</script>

<template>
    <div>
        <!-- 异步组件配合Suspense -->
        <!-- 
            Suspense:等待异步组件时渲染一些额外内容，让应用有更好的用户体验
            default和fallback不可改名,因为这是Suspense内部定义好的插槽
            fallback是由于网速或者其他原因没有加载成功时显示的组件
         -->
        <Suspense>
            <template v-slot:default>
                <asyncCom></asyncCom>
            </template>
            <template  v-slot:fallback>
               <h1>Loading</h1>
            </template>
        </Suspense>
    </div>
</template>

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！