动态导入实现路由懒加载需确保构建工具生成独立chunk并按需加载：vue router/react router中component须为返回promise的函数，vite/webpack据此拆包；禁用顶层import和不可控动态路径，推荐import.meta.glob显式声明模块范围；后端动态路由需预收集合法模块并映射；配合suspense或defineasynccomponent处理加载与错误状态。
动态导入在路由懒加载中不是简单写个 import() 就行，关键在于让构建工具真正生成独立 chunk，并确保它只在导航时触发加载。
路由配置里必须用函数包裹 import()
Vue Router 和 React Router 都支持把 component 或 element 设为返回 Promise 的函数。Vite 或 Webpack 会据此识别并拆包：
- ✅ 正确写法（触发分包）：
component: () => import('@/views/Home.vue') - ❌ 错误写法（顶层执行，失去懒加载意义）：
import Home from '@/views/Home.vue'<br>component: Home
- ⚠️ 注意：React 中需配合
Suspense使用React.lazy，例如：const Home = React.lazy(() => import('@/pages/Home.tsx'))
避免不可控的动态路径导致全量打包
构建阶段需要静态分析 import() 路径。如果路径完全由变量拼接，打包器无法判断范围，可能把整个目录都打进产物：
- ❌ 危险写法（全量扫描）：
import(`./pages/${route.name}.vue`) - ✅ 推荐写法（限定范围）：
import(`./pages/${['home', 'about', 'user'].includes(name) ? name : '404'}.vue`) - ✅ 更稳妥写法（显式声明）：
const modules = import.meta.glob('./views/**/*.vue')<br>component: modules[`./views/${name}.vue`]
后端返回动态路由时的处理方式
当路由结构由服务端下发（如权限控制场景），前端不能提前写死路径。此时要靠 import.meta.glob 预先收集合法模块，再做映射：
- 先统一收集所有页面：
const pages = import.meta.glob('./views/**/*.{vue,tsx}') - 后端返回
{ path: '/admin/logs', component: 'AdminLogs' }，就查表：component: pages[`./views/${item.component}.vue`] - 好处是构建时只打包 glob 匹配到的文件，不会误打无关模块
加上加载与错误状态提升体验
动态导入本质是 Promise，天然支持异步流程控制：
- Vue 中可用
defineAsyncComponent封装：loading: LoadingSkeleton, error: ErrorFallback - React 中用
Suspense+Fallback组件展示加载态 - 建议对 404、网络失败等常见错误提供降级 UI，避免白屏或报错中断流程
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
