如何实现 Vue 代码的懒执行与动态加载？-Vue.js-PHP中文网

vue懒加载核心是按需加载组件、路由和逻辑以减小首屏体积、提升响应速度；路由级用import()配合vue router，组件级用defineasynccomponent，逻辑层延迟导入并缓存，ssr需注意水合与环境判断。

如何实现 vue 代码的懒执行与动态加载？

Vue 代码的懒执行与动态加载，核心是按需加载组件、路由和逻辑，减少首屏体积、提升响应速度。关键不在“全部写完再运行”，而是在真正需要时才定义、实例化或执行。

路由级懒加载（最常用）

使用 import() 替代静态 import，让 Webpack/Vite 自动分割代码并生成独立 chunk。

Vue Router 中直接在 component 配置里返回 Promise：

{ path: '/admin', component: () => import('@/views/Admin.vue') }

支持命名 chunk（便于调试和缓存控制）：import(/* webpackChunkName: "admin" */ '@/views/Admin.vue')
Vite 下写法一致，自动识别 import() 并做异步处理，无需额外配置

组件级懒加载（局部按需）

对非首屏、条件触发或模态框内的组件，用 defineAsyncComponent 包裹。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

基础用法：

import { defineAsyncComponent } from 'vue'
const HeavyChart = defineAsyncComponent(() => import('./HeavyChart.vue'))

可添加 loading、error 状态：

defineAsyncComponent({
loader: () => import('./HeavyChart.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorPanel,
delay: 200,
timeout: 5000
})

逻辑与模块的懒执行（非组件场景）

函数内部、事件回调、watch 或 onMounted 中，延迟加载依赖或执行耗时逻辑。

避免在 setup 顶层同步 import 大模块（如 Excel 处理库）：
改在点击后动态导入并使用：

const handleExport = async () => {
const { exportToExcel } = await import('@/utils/excel')
exportToExcel(data)
}

搭配 ref 或 computed 做缓存，避免重复加载：

let excelUtils = null
const getExcelUtils = async () => {
if (!excelUtils) {
const module = await import('@/utils/excel')
excelUtils = module
}
return excelUtils
}