vue动态加载实现
Vue动态加载实现方法
动态加载在Vue中通常指按需加载组件或资源，以下是几种常见实现方式：
使用异步组件
通过defineAsyncComponent或动态import()语法实现组件按需加载：
const AsyncComponent = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)路由懒加载
在Vue Router配置中使用动态导入实现路由级代码分割：
const routes = [
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue')
}
]条件动态加载
结合v-if和动态组件实现条件加载：
<template>
<component :is="currentComponent" v-if="showComponent" />
</template>
<script>
export default {
data() {
return {
showComponent: false,
currentComponent: null
}
},
methods: {
loadComponent() {
this.currentComponent = () => import('./DynamicComponent.vue')
this.showComponent = true
}
}
}
</script>动态模块加载
通过Webpack的require.context实现批量动态加载：
const modules = {}
const context = require.context('./modules', false, /\.vue$/)
context.keys().forEach(key => {
modules[key] = context(key).default
})注意事项
- 动态导入返回Promise，需处理加载状态和错误
- 生产环境会生成独立chunk文件
- 可配合Webpack的魔法注释指定chunk名称：
const component = () => import(/* webpackChunkName: "my-chunk" */ './component.vue')
性能优化建议
- 对非关键组件使用动态加载
- 预加载重要动态组件
- 使用骨架屏提升用户体验
- 合理配置Webpack的splitChunks参数
