vue动态加载实现
Vue 动态加载实现方法
使用 import() 动态导入组件
通过 Webpack 或 Vite 的代码分割功能，结合 Vue 的 defineAsyncComponent 实现按需加载。适用于路由懒加载或条件渲染场景。
const AsyncComponent = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)路由懒加载配置
在 Vue Router 中直接使用 import() 语法，实现路由级别的动态加载。
const router = new VueRouter({
routes: [
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue')
}
]
})动态组件绑定
通过 :is 指令结合动态组件名实现运行时切换。需确保组件已注册或可通过异步加载获取。
<component :is="currentComponent" />export default {
data() {
return {
currentComponent: null
}
},
methods: {
async loadComponent() {
this.currentComponent = await import('./DynamicComponent.vue')
}
}
}工厂函数模式
对于需要参数化加载的场景，可使用工厂函数返回动态导入语句。
const getComponent = (name) => defineAsyncComponent(() =>
import(`./components/${name}.vue`)
)注意事项
- 动态路径不能完全动态（如
import(pathVariable)），需包含部分静态路径供打包工具分析 - 生产环境需配置正确的 chunk 命名规则，避免缓存问题
- 可配合 Loading 状态和错误处理组件提升用户体验
const AsyncWithStatus = defineAsyncComponent({
loader: () => import('./HeavyComponent.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorDisplay,
delay: 200,
timeout: 3000
})性能优化技巧
- 使用
webpackPrefetch注释预加载关键资源 - 对非关键组件设置较低的优先级
- 结合路由的
component和components字段实现嵌套路由的细粒度加载
// Webpack 魔法注释示例
const PrefetchedComponent = () => import(
/* webpackPrefetch: true */
'./Prefetched.vue'
)
