路由懒加载是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 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章