【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>
总结
以上就是今天要讲的内容，希望对大家有所帮助！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/82846.html
