Vue路由懒加载通过import()动态导入实现按需异步加载，减少首屏体积；需在路由配置中用()=>import()替代静态import，并可配合webpackChunkName命名chunk、defineAsyncComponent处理加载状态。
Vue 路由懒加载通过 import() 动态导入语法实现组件的按需异步加载，能有效减少首屏包体积，提升应用启动速度。
在路由配置中使用 import() 替代静态引入
不要直接 import 组件，而是把组件路径写在 import() 函数里，返回一个 Promise，Vue Router 会自动等待组件加载完成后再渲染：
- ❌ 错误写法（同步引入，无懒加载）：
import Home from './views/Home.vue'{ path: '/', component: Home } - ✅ 正确写法（动态 import，触发懒加载）：
{ path: '/', component: () => import('./views/Home.vue') }
配合 Webpack 实现代码分割与命名
Webpack 会自动将每个 import() 调用打包成独立的 chunk。你还可以通过 webpackChunkName 注释为 chunk 命名，便于调试和缓存管理：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')- 生成的文件名类似
home.[hash].js，利于长期缓存和按模块分析体积 - 多个路由共用同一 chunk 名称时，Webpack 会合并它们到同一个文件中
处理加载状态与错误降级
懒加载存在网络延迟或失败可能，建议包裹一层异步组件逻辑，支持 loading 和 error 状态：
立即学习“前端免费学习笔记（深入）”；
- 可借助 Vue 的
defineAsyncComponent（Vue 3）或自定义异步组件工厂（Vue 2） - Vue 3 示例：
import { defineAsyncComponent } from 'vue'<br> const AsyncHome = defineAsyncComponent({<br> loader: () => import('./views/Home.vue'),<br> loadingComponent: LoadingComponent,<br> errorComponent: ErrorComponent,<br> delay: 200,<br> timeout: 5000<br> })
再在路由中使用component: AsyncHome
注意事项与常见问题
- 确保 Babel 或 TypeScript 配置支持动态
import()（一般现代脚手架已默认启用） - 路径必须是字符串字面量，不能拼接变量（如
import(`./views/${name}.vue`)会导致 Webpack 无法静态分析，可能打包全部组件） - Vite 中同样支持该语法，且无需额外配置，
import()会被原生处理为 ES 动态导入 - 路由嵌套时，子路由也可单独懒加载，不必与父路由耦合
