Vue 3 进阶用法:异步组件（vue 异步组件原理）
csdh11 2025-05-08 17:34 3 浏览
一、代码分割
一个大型前端应用，如果所有代码都放在单一文件，体积会特别大，下载时间长，白屏时间久，用户体验差。
代码分割（Code Splitting）是一种有效的优化方式。提前把代码切分为多个小块，只下载当前必需的部分，用到哪块下载哪块。就像吃自助餐一样，吃多少拿多少。
早期的代码分割一般通过 webpack 实现。随着 ES6 的不断流行，原生的 import() 成为更好的选择。
使用 import() 和《Vue 3 组件入门》介绍的动态组件，可以实现一个简单的代码分割[2]。
实际运行效果如图：
上面代码“糙快猛”地实现了代码分割，但是离“完美”还有一些差距：
- 如果组件报错，怎么处理？
- 如果加载时间长，如何处理？
- 如果加载超时，怎么办？
二、异步组件
为了解决加载组件中出现的报错、超时、状态展示等问题，可以使用 Vue 3 提供的异步组件（Async Components），它对于加载过程做了更细致的控制。
使用 defineAsyncComponent() 函数定义异步组件。它有几个主要选项：
- loader：加载函数，用于加载指定的目标组件
- loadingComponent：加载过程中的替身组件
- errorComponent：加载失败的替罪羊组件
- delay：设定替身组件出现的延迟时间。如果加载时间够快，替身可以不用出场。默认值是 200ms。
- timeout：设定超时时间，超过这个时间就算加载失败。默认值是 Infinity，即永不超时。
实例代码如下：
加载中的状态：
加载成功的状态：
加载失败的状态：
三、异步组件的简写形式
如果你不需要那么多状态切换，可以使用异步组件的简写形式。只需要传入 loader 选项对应的加载函数即可。
参考资料
- Async Components，https://vuejs.org/guide/components/async.html
- 霍春阳，《Vue.js设计与实现》第13章异步组件与函数式组件，人民邮电出版社，2022
- JavaScript modules: dynamic import()，https://caniuse.com/es6-module-dynamic-import
完
相关推荐
- IDEA界面太丑??尝试一下这几个插件
-
前言IntelliJIDEA主要用于支持Java、Scala、Groovy等语言的开发工具，同时具备支持目前主流的技术和框架，擅长于企业应用、移动应用和Web应用的开发。IntelliJi...
- 小巧 Vue 页面滚动进度条组件ScrollProgress
-
今天给大家分享一个轻量级Vue.js全屏滚动进度条组件VueScrollProgress。vue-scroll-progress一款基于vue.js构建的页面滚动进度条组件，...
- 基于vue实现可视化拖拽编辑器，页面生成工具，提升前端开发效率
-
项目介绍基于vue实现的可视化拖拽编辑器，实现页面生成工具，提升前端开发效率。可以基层到移动端项目作为自定义json直接生成UI页面。项目特点功能特点...
- 优秀 vue+heyui 后端管理系统HeyUI-Admin
-
今天再给小伙伴们推荐一款成熟的企业中后台管理系统HEYUI-Admin。heyui-admin基于vue.js和heyui组件库构建的后台管理系统。包含基础表单/表格功能，拓展组件(图表、富文本编辑...
- 响应式 Vue.js 前端组件化框架Xvue-UI
-
今天给小伙伴们推荐一款超不错的Vue轻量级组件框架XVueUI。xvue-ui基于vue2.x构建的响应式前端组件化框架。轻量级、易于上手，提供...
- 《基于SpringBoot+Vue的在线视频系统设计与实现》开题报告
-
【计算机毕业设计案例】基于SpringBoot+Vue的在线视频系统设计与实现_哔哩哔哩_bilibili...
- 超好用 Vue.js 图片裁切组件Vue-ImgCutter
-
今天给小伙伴们分享一个超棒的Vue图片任意裁剪插件VueImgCutter。vue-img-cutter基于vue2.x构建的轻量级剪切图片组件。支持移动图像、放大缩小图片、任意移动图片、固定比...
- Vue 3 进阶用法:异步组件（vue 异步组件原理）
-
一、代码分割一个大型前端应用，如果所有代码都放在单一文件，体积会特别大，下载时间长，白屏时间久，用户体验差。...
- 源码补丁神器—patch-package（源码助手怎么用）
-
作者：张浩一、背景vue项目中使用vue-pdf第三方插件预览pdf，书写业务代码完美运行，pdf文件内容正常预览无问题。后期需求有变，业务需求增加电子签章功能。这个时候pdf文件的内容可以显示出...
- 经验分享:Vue2 项目升级 Vue3 + Element Plus，借助Deepseek手动升级
-
Vue3出来好久了，我开发的项目还在使用Vue2框架，一般情况下不考虑升级，但是最近需要接入工作流程引擎之类的，看了下Vue2生态下操作空间不是很好，那索性尝试升级Vue3吧。一番操作下来，升级成功，...
- 34K Star!史上最全JavaScript资源库 awesome-javascript
-
34KStar！史上最全JavaScript资源宝库大揭秘引言在GitHub上，有一个备受瞩目的JavaScript资源仓库，以其全面的内容和精心的分类，成为了众多开发者的必备参考。这个拥有超过...
- 基于 Vue.js 磁片栅格布局组件VueGridLayout
-
#头条创作挑战赛#今天给大家分享一个超优秀的vue.js拖拽栅格布局插件VueGridLayout。...
- 6款高颜值 Vue3 PC端UI组件库（vue3开发组件库）
-
马上到国庆了，还没学习或者想学习vue3的小伙伴们有安排上没？这次推荐几个比较流行的VUE3UI组件库，合理利用，又或者学习借鉴都是不错的选择。1、element-pluselement-plus...
- 高性能 vue.js+ztree 树形组件Vue-GiantTree
-
今天给大家分享一款超棒的Vue海量数据渲染树形组件VueGiantTree。vue-giant-tree基于ztree封装的Vue树形组件。轻松实现大数据高性能渲染，适合海量数据渲染场景。zTr...
- 【推荐】2024年推荐的6款开源免费 Vue 后台管理系统模板，建议收藏
-
前言在现今的软件开发领域，...
- 一周热门
- 最近发表
-
- IDEA界面太丑??尝试一下这几个插件
- 小巧 Vue 页面滚动进度条组件ScrollProgress
- 基于vue实现可视化拖拽编辑器，页面生成工具，提升前端开发效率
- 优秀 vue+heyui 后端管理系统HeyUI-Admin
- 响应式 Vue.js 前端组件化框架Xvue-UI
- 《基于SpringBoot+Vue的在线视频系统设计与实现》开题报告
- 超好用 Vue.js 图片裁切组件Vue-ImgCutter
- Vue 3 进阶用法:异步组件（vue 异步组件原理）
- 源码补丁神器—patch-package（源码助手怎么用）
- 经验分享:Vue2 项目升级 Vue3 + Element Plus，借助Deepseek手动升级
- 标签列表
-
- mydisktest_v298 (34)
- document.appendchild (35)
- 头像打包下载 (61)
- acmecadconverter_8.52绿色版 (39)
- word文档批量处理大师破解版 (36)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- parsevideo (33)
- 个人网站源码 (37)
- centos7.4下载 (33)
- mysql 查询今天的数据 (34)
- intouch2014r2sp1永久授权 (36)
- 先锋影音源资2019 (35)
- jdk1.8.0_191下载 (33)
- axure9注册码 (33)
- pts/1 (33)
- spire.pdf 破解版 (35)
- shiro jwt (35)
- sklearn中文手册pdf (35)
- itextsharp使用手册 (33)
- 凯立德2012夏季版懒人包 (34)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)
- dos 删除目录下所有子目录及文件 (36)