Setup 异步组件如何在 setup 中配合 defineAsyncComponent 实现路由组件按需加载

defineAsyncComponent 实现路由组件按需加载，核心是封装 import() 为异步组件，仅在路由匹配或首次渲染时触发加载；推荐路由配置中直接使用 () => import() 配合 webpackChunkName 注释实现 code-splitting；手动控制可用 ref + v-if；支持 loading/error 状态但应按需精细控制。

在 setup 中用 defineAsyncComponent 实现路由组件按需加载，核心是把动态 import 封装成异步组件，并确保它只在路由匹配时才触发加载，而不是一进入应用就执行。

直接在 setup 里定义异步组件变量

不需要额外状态控制，只要用 defineAsyncComponent 包裹 import() 即可。这个组件在首次被渲染（比如路由切换到对应页面）时才真正发起请求：

1. 在 setup script 中导入并定义：

   import { defineAsyncComponent } from 'vue'

   const UserPage = defineAsyncComponent(() => import('@/views/UserPage.vue'))

2. 把它作为普通组件注册进 components 选项（Composition API 中可通过 components 选项或返回对象暴露）
3. 模板中直接使用：<UserPage />，但更常见的是配合 <router-view> 自动渲染，无需手动写标签

配合 Vue Router 实现真正的路由级懒加载

defineAsyncComponent 不是必须的——Vue Router 3.1+ 和 4.x 原生支持函数式 component 写法，Vite/Webpack 会自动做 code-splitting：

1. 路由配置中直接写：

   component: () => import('@/views/Dashboard.vue')

2. 推荐加 webpackChunkName 注释，便于调试和缓存管理：

   component: () => import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue')

3. 这样每个路由页都是独立 chunk，用户访问 /dashboard 时才加载 dashboard.[hash].js，首屏不参与竞争

需要手动控制加载时机时：用 ref + v-if 触发

适合非路由场景，比如按钮点击后才加载重型编辑器，或 Tab 切换后才拉取子模块：

1. 在 setup 中声明 ref：

   const Editor = ref(null)

2. 定义加载函数：

   const loadEditor = async () => { Editor.value = (await import('@/components/Editor.vue')).default }

3. 模板中配合条件渲染：

   <component :is="Editor" v-if="Editor" />，再用按钮调用 loadEditor()

4. 这种方式绕过 defineAsyncComponent，更灵活，也避免了无意义的 loading 状态管理

加载状态与错误处理（可选增强）

如果想对某个异步路由组件提供 loading 或 error 提示，可以显式传入配置对象：

1. 例如：

   const AsyncReport = defineAsyncComponent({

   loader: () => import('@/views/Report.vue'),

   loadingComponent: { template: '<div>图表加载中...</div>' },

   errorComponent: { template: '<div>加载失败，请刷新</div>' },

   delay: 300,

   timeout: 8000

   })

2. 注意：这些状态只在组件实际被渲染时生效，所以仍要依赖路由或 v-if 控制展示时机
3. 不建议全局统一加 loading，应按需、按模块精细控制体验