vue3 中 defineasynccomponent 实现按需加载，核心是组件仅在渲染时才加载，减少首屏体积；支持 loading/error 组件、delay/timeout 控制，并需配合 v-if 等条件渲染生效。

Vue3 中用 defineAsyncComponent 实现按需加载，核心是让组件只在真正需要渲染时才发起加载请求，而不是随主包一起打包进初始 JS 文件。它不改变使用方式，但大幅减少首屏体积。

基础写法：最简异步封装

直接包裹动态 import 即可：

• 从 'vue' 导入 defineAsyncComponent
• 用 defineAsyncComponent(() => import('./MyModal.vue')) 创建异步组件变量
• 像普通组件一样注册并使用，比如放入 components 选项或 setup 的返回对象中

此时 MyModal.vue 不会出现在 initial chunk 里，只有第一次 <mymodal></mymodal> 被渲染（例如 v-if 为 true 或出现在 DOM 中）时，才触发网络请求加载。

加载状态控制：避免白屏或卡顿

用户点击后到组件加载完成之间存在延迟，需提供反馈：

• 通过 loadingComponent 指定一个简易占位组件（如 “加载中…” 文字或 spinner）
• 用 errorComponent 处理加载失败（例如网络中断、404），显示友好提示
• delay 控制 loading 展示最小等待时间（默认 0），防止闪动；timeout 设定最大等待时长（单位毫秒），超时自动触发 errorComponent

示例配置：

Vue-router参考手册

Vue-router参考手册下载

下载

<script><br> import { defineAsyncComponent } from 'vue'<br> const AsyncModal = defineAsyncComponent({<br> loader: () => import('./Modal.vue'),<br> loadingComponent: { template: '<div class="spinner">加载中...' },<br> errorComponent: { template: '<div>加载失败，请重试' },<br> delay: 200,<br> timeout: 5000<br> })<br> export default { components: { AsyncModal } }<br> </script>

配合条件渲染实现真正按需

异步组件本身不会自动“懒”，必须配合渲染逻辑才能生效：

• 避免在模板中无条件渲染：<asynccomponent></asynccomponent> —— 这样一进入页面就触发加载
• 推荐结合 v-if 或 <component :is="..."></component> 动态切换，例如按钮点击后才设 show = true
• 对弹窗、Tab 面板、折叠区域等“非首屏必需”内容特别有效

常见结构：

进阶技巧：预加载与 Chunk 命名

虽然叫“异步”，但你也可以主动预加载（比如用户 hover 按钮时）：

• 调用异步组件变量的 load() 方法可提前触发加载（返回 Promise）
• 在 import 中添加 webpack 注释，如 import(/* webpackChunkName: "dialog" */ './Dialog.vue')，便于调试和缓存管理
• 搭配 <suspense></suspense> 可统一处理嵌套异步组件的 loading/error 状态（需父级启用）

不复杂但容易忽略：只要 loader 返回的是 Promise，defineAsyncComponent 就能识别并接管整个生命周期。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！