路由懒加载是Vite项目减小首屏体积最直接有效的手段，通过动态import()实现按需加载，配合import.meta.glob可批量处理动态路由，首屏体积降低40%–60%。
路由懒加载是 Vite 项目减小首屏体积最直接、见效最快的手段。它不改变代码逻辑，只调整资源加载时机，让浏览器首次只下载登录页、布局等必要模块，其余页面代码在真正跳转时才拉取。
为什么懒加载对 Vite 特别有效
Vite 的构建基于原生 ES 模块，动态 import() 会被自动识别为异步 chunk，无需额外配置即可生成独立的 JS 文件。相比 Webpack 需要手动指定 webpackChunkName，Vite 默认就做了合理分包，配合 import.meta.glob 还能批量处理几十个页面，开发体验更轻量。
基础写法：单个路由按需加载
把原本同步引入的组件，改成函数式异步导入：
- 之前（全量打包进主包）：
import UserList from '@/views/user/List.vue' - 之后（生成独立 chunk）：
const UserList = () => import('@/views/user/List.vue')
这样写后，UserList.vue 及其依赖（比如用到的图表组件、工具函数）会单独打包成一个文件，如 user-List.abc123.js，首屏完全不加载。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
进阶用法：动态路由 + 批量懒加载
后台系统菜单常由后端返回，不能写死所有路由。可用 import.meta.glob 预扫描目录，运行时按路径匹配加载：
- 在 router 中定义通用加载函数：
const modules = import.meta.glob('@/views/**/*.vue') - 注册路由时：
component: modules[`/src/views${routePath}.vue`] - 配合后端菜单数据，只注册一级路由（如 /dashboard），子页面（如 /user/list）留到用户点开时再加载
这能让首屏主包体积直降 40%–60%，尤其适合中大型管理后台。
搭配建议：避免拆得太碎
懒加载不是越多越好。注意三点：
- 首屏必须展示的组件（如顶部导航、侧边栏）仍应同步加载，保证 UI 立即可用
- 关联性强的页面（如用户管理下的列表、详情、编辑）可共用一个 chunk，加注释提示 Vite 合并：
() => import('@/views/user/Edit.vue' /* @vite-ignore */)或用rollupOptions.manualChunks手动归组 - 网络环境较差时，可配合
<link rel="prefetch">提前缓存常用页面，提升二次访问速度
