Vue 3 异步组件通过 defineAsyncComponent 和动态 import() 实现按需加载与代码分割，核心是“用时才载”；支持路由级（Vue Router 配置）和组件级（配合 Suspense）懒加载，并可配置 delay、timeout、onError 等增强体验。
Vue 3 中异步组件通过 defineAsyncComponent 配合动态 import() 实现真正的按需加载与代码分割——核心是“用时才载”，而非“启动即载”。它不改变组件逻辑，只改变加载时机和方式，让打包工具（如 Vite 或 Webpack）自动把目标组件抽成独立 chunk。
路由级懒加载：最常用也最有效的方式
在 Vue Router 配置中，把组件定义为动态导入函数，即可触发代码分割：
- 写法示例：
component: () => import('@/views/UserManage.vue') - 效果：访问
/user路由时，UserManage.vue及其依赖才会被请求并执行 - 进阶技巧：添加 webpackChunkName 注释可合并多个组件到同一 chunk，例如：
() => import(/* webpackChunkName: "admin" */ '@/views/Setting.vue')
组件级懒加载：适合大体积或低频子组件
不是所有组件都值得单独拆包，但像富文本编辑器、图表库封装、视频播放器这类重型子组件，适合在父组件中按需引入：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 使用
defineAsyncComponent包裹动态 import：const Editor = defineAsyncComponent(() => import('./Editor.vue')) - 配合
<Suspense>提供加载占位与错误兜底：<template #fallback><Loading /></template> - 适用于按钮点击后弹出的模态框、折叠展开的详情区等交互触发场景
增强控制：加载状态、超时与错误重试
基础写法只解决“是否加载”，真实项目还需应对网络波动与用户体验：
立即学习“前端免费学习笔记（深入）”；
-
delay：设置加载骨架屏延迟显示（默认 200ms），避免闪动 -
timeout：设定加载上限（如 30s），超时后触发错误流程 -
onError：捕获错误并支持重试逻辑，比如网络失败时自动重试三次 -
loadingComponent和errorComponent：分别自定义加载中与失败界面，提升可感知性
构建层面配合：确保代码真正被分割
即使写了 import()，若构建配置未启用代码分割，结果仍是全量打包：
- Vite 默认支持，无需额外配置；Webpack 需确认已启用
optimization.splitChunks - 检查生成的 dist 目录：应出现多个
src_views_XXX_vue.****.js类似命名的 chunk 文件 - 浏览器 Network 面板中，切换路由或触发组件加载时，应看到对应 chunk 的单独请求
