vite中动态导入实现按需路由加载的关键是路由组件必须包裹在函数中调用import()，如component: () => import('@/views/home.vue')，避免顶层调用或不可预测的动态路径，推荐使用import.meta.glob显式声明可导入范围，并配合加载状态与错误降级处理。
在 Vite 中用动态导入实现按需路由加载，核心是让每个路由组件只在被访问时才加载，不打包进主资源。关键不是“怎么写 import()”，而是“怎么写才能真正触发分包且不被误打包”。
路由配置里直接写 import() 函数
Vue Router 或 React Router 都支持把组件定义为一个返回 Promise 的函数。Vite 会自动识别这种写法，并为每个路径生成独立的 chunk 文件（如 Home.abc123.js）。
- Vue 示例：component: () => import('@/views/Home.vue')
- React 示例（配合 Suspense）：const Home = React.lazy(() => import('@/pages/Home.tsx'))
- 注意：不能写成 import('@/views/Home.vue')（顶层调用），必须包裹在函数中，否则构建时就执行，失去“按需”意义
避免动态路径导致全量打包
Vite（底层 Rollup）需要在构建阶段静态分析 import() 的路径。如果写成 import(`./pages/${name}.vue`) 这类完全变量拼接，它会尝试打包 ./pages/ 下所有 .vue 文件——哪怕你只用其中两个。
- ✅ 推荐：路径尽量固定或有明确范围，比如 import(`./pages/${['home', 'about'].includes(name) ? name : '404'}.vue`)
- ✅ 更稳妥：用 import.meta.glob 显式声明可导入范围：const modules = import.meta.glob('./views/**/*.vue')，再根据路由表查表加载
- ❌ 避免：import(`./pages/${route.path}.vue`)（path 完全不可预测）
服务端返回动态路由时的处理方式
权限控制类场景中，路由结构由后端返回，前端不能提前写死 import()。这时不能靠运行时拼路径，而要用 import.meta.glob 预先收集所有合法页面模块，再做映射。
- 先统一收集：const pages = import.meta.glob('./views/**/*.{vue,tsx}')
- 后端返回 { path: '/user/profile', component: 'UserProfile' }，就通过 pages[`./views/${item.component}.vue`] 获取加载函数
- 好处：构建时只打包 glob 匹配到的文件，不会把整个 views 目录全打进产物
配合加载状态与错误降级
动态导入本质是 Promise，可以自然接入 loading 和 error 处理逻辑，提升体验。
- Vue 中可在 setup 里用 defineAsyncComponent 封装：loading: LoadingSkeleton, error: ErrorFallback
- React 中用
> + React.lazy - 建议加超时和重试：封装一层 loadWithRetry，防止网络抖动导致白屏
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
