vue 实现异步加载
Vue 实现异步加载的方法
动态导入组件
使用 defineAsyncComponent 或动态 import() 语法实现按需加载组件。适用于路由懒加载或大型组件拆分。
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)路由懒加载
通过动态导入语法实现路由级别的异步加载，减少初始包体积。
const routes = [
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue')
}
]Suspense 组件处理加载状态
配合 <Suspense> 包装异步组件，提供加载中和回退状态的 UI 展示。
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>异步数据加载
在组合式 API 中使用 async/await 或 Promise 处理数据获取。
import { ref } from 'vue'
const data = ref(null)
const loadData = async () => {
data.value = await fetch('/api/data').then(res => res.json())
}代码分割优化
通过 Webpack 的魔法注释或 Vite 的配置，自定义异步模块的打包行为。
const module = () => import(/* webpackChunkName: "my-chunk" */ './module.js')第三方库支持
使用 v-lazy 等指令实现图片或元素的懒加载（需安装 vue-lazyload 等插件）。
<img v-lazy="imageUrl" alt="Lazy Image">注意事项
- 错误处理需通过
defineAsyncComponent的errorComponent或onError回调实现 - 生产环境需检查打包后的 chunk 文件是否按预期分割
- 移动端考虑弱网环境下加载超时策略
- SSR 场景需特殊处理异步组件 hydration
