动态路由需配合懒加载才能优化首屏性能，即权限驱动的路由生成+动态import；须避免静态导入、chunk爆炸及丢失懒加载特性，并兼顾切换体验。
动态路由本身不直接提升首屏性能，真正起作用的是配合路由懒加载——把“按需加载”和“权限驱动的路由生成”结合起来，才能既保证灵活性，又控制首屏体积。
动态路由与懒加载不是二选一，而是分层协作
动态路由指系统在运行时（比如登录后）根据用户权限拉取菜单列表，再动态注册路由；懒加载则是让每个路由组件只在访问时才加载。两者结合的关键在于：动态注册的路由项，其 component 字段必须使用动态 import，不能是静态导入。
- 错误做法：先静态导入组件，再塞进动态路由对象里——所有组件仍会打包进主包
- 正确做法：动态路由配置中，每个 route 的 component 是
() => import('@/views/xxx')形式 - 典型结构示例：
{ path: '/user', name: 'UserList', component: () => import('@/views/system/user/index') }
避免动态路由导致的 chunk 爆炸
如果每个菜单项都单独拆成一个 chunk，100 个页面就会产生 100 个 JS 文件，HTTP 请求增多反而拖慢体验。建议按业务域分组命名 chunk：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 用
/* webpackChunkName: "system" */统一标记系统管理类页面 - 用
/* webpackChunkName: "report" */合并所有报表相关组件 - 这样 Webpack 会把同名 chunk 合并为一个文件，兼顾拆分与复用
权限过滤后的路由也要保持懒加载特性
很多项目在后端返回菜单后，前端用 router.addRoute() 注册路由。这时容易忽略一点：addRoute 的参数必须包含懒加载写法，否则新增的路由依然会走静态加载路径。
立即学习“前端免费学习笔记（深入）”；
- 不要传
component: UserList（已导入的变量） - 要传
component: () => import('@/views/system/user/index') - 可封装一个工厂函数统一处理：
const lazyView = (path) => () => import(`@/views/${path}`)
首屏之外的体验也得兼顾
懒加载虽减小了首屏体积，但切换路由时可能出现短暂白屏或 loading 卡顿。建议：
- 给路由组件外层加骨架屏或 loading 状态提示
- 对高频访问页面（如 dashboard、home）可考虑预加载：
import('@/views/dashboard/index').then(...)在登录成功后主动触发 - 避免将强关联页面（如增删改查四页）拆到不同 chunk，防止反复加载相似逻辑
