【Vue3 第二十章】异步组件 & 代码分包 & Suspense内置组件 & 顶层 await|环球热闻
2023-02-27 01:03:36
哔哩哔哩
一、概述
在大型项目中，我们可能需要拆分应用为更小的块，以减少主包的体积，并仅在需要时再从服务器加载相关组件。这时候就可以使用异步组件。
(相关资料图)
Vue 提供了 defineAsyncComponent 方法来实现此功能，这个方法接收一个返回 Promise 的加载函数。
ES 模块动态导入会返回一个 Promise，所以多数情况下我们会将它和 defineAsyncComponent 搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点)，因此我们也可以用它来导入 Vue 单文件组件。
1.1 组件内注册异步组件（局部注册）
1.2 全局注册异步组件
二、代码分包 & 高级选项配置
2.1 代码分包
父组件引用子组件，通过 defineAsyncComponent 加载异步配合 import 函数模式便可以分包，先执行 npm run build指令，观察异步加载组件打包后 dist目录文件。
然后修改代码为组件同步引入时，再执行 npm run build指令，观察打包后 dist目录下文件的变化。
三、Suspense内置组件
<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。如果在渲染时遇到异步依赖项 (异步组件和具有 async setup()的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。
四、顶层 await
看完两件事
如果你觉得这篇内容对你挺有启发，我想邀请你帮我两个小忙：
点个「赞」或者「转发评论」，让更多的人也能看到这篇内容（喜欢不点赞，都是耍流氓 -_-）
关注公众号「前端知识分享喵」，不定时更新前端技术分享，
公众号后台回复「电子书」即可免费获取精选的前端电子书。
添加 MagnumHou 微信，可以获取 up 主有的大机构的学习视频哦
