vite 中动态导入（import()）是实现代码懒加载最标准轻量的方式，原生支持并自动拆分 chunk；可用于路由级、条件性及交互触发场景，需注意路径静态性、错误处理与性能优化。
在 Vite 中使用动态导入（import()）是实现代码按需懒加载最标准、最轻量的方式，无需额外配置，开箱即用。
动态导入语法：直接用 import() 函数
Vite 原生支持 ES 动态导入语法，它会自动将被导入的模块拆分为独立的 chunk，并在运行时按需加载。
例如，在组件中延迟加载一个 HeavyComponent：
const loadHeavyComponent = async () => {
const { default: HeavyComponent } = await import('./HeavyComponent.vue')
return HeavyComponent
}你也可以在 defineAsyncComponent（Vue）或 React.lazy（React）中配合使用，让框架接管加载与错误处理逻辑。
路由级懒加载（推荐用于 SPA）
在基于 Vue Router 或 React Router 的项目中，把页面组件设为动态导入，就能实现路由级代码分割：
-
Vue Router 示例：
const routes = [ { path: '/dashboard', component: () => import('@/views/Dashboard.vue') // ✅ 自动转为异步 chunk } ] -
React Router 示例（v6.4+）：
const Dashboard = React.lazy(() => import('@/pages/Dashboard'))搭配
Suspense渲染 loading 状态即可。
条件性/交互触发的懒加载
适合点击弹窗、展开详情、切换 Tab 等场景。注意避免重复导入，可加缓存：
let ModalComponent = null
const openModal = async () => {
if (!ModalComponent) {
const module = await import('./Modal.vue')
ModalComponent = module.default
}
// 使用 ModalComponent 渲染或挂载
}也可结合 Promise 缓存提升性能，尤其对可能多次触发的操作。
注意事项和优化提示
- 动态导入路径必须是**静态可分析的字符串**（不能是拼接变量），否则 Vite 无法打包分割；
- 导入失败会抛出异常，建议用
try/catch处理网络错误或 404； - 可利用
/* @vite-ignore */注释跳过类型检查（TypeScript 中临时绕过未定义模块问题）； - 配合
vite-plugin-compression或构建时启用build.rollupOptions.output.manualChunks可进一步优化 chunk 复用。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
