Vue路由懒加载与预加载是互补策略：懒加载按需加载减小首包体积，预加载提前获取提升跳转体验；结合组件级异步加载与验证调优，可兼顾首屏速度与交互流畅度。
Vue 路由懒加载和预加载不是“二选一”的取舍，而是互补的加载策略：懒加载解决“不该早加载”的问题，预加载解决“等不及再加载”的问题。合理搭配能兼顾首屏速度与交互流畅度。
路由懒加载：按需加载，减小首包体积
懒加载的核心是把每个路由组件拆成独立 chunk，只在用户真正访问该路径时才发起请求。它直接降低初始 JS 包大小，避免白屏等待。
- 写法统一用动态 import：
component: () => import('@/views/User.vue')，不要静态导入 - 对关联页面做 chunk 分组，比如用户中心下的多个子页，加 Webpack 魔法注释：
import(/* webpackChunkName: "user-module" */ '@/views/user/Profile.vue') - Vite 项目无需额外配置，但可在
vite.config.ts中通过manualChunks手动归并高频共用模块 - 配合
<Suspense>显示加载状态，提升感知性能，例如骨架屏或 loading 指示
路由预加载：提前准备，消除跳转延迟
预加载不是“全量预热”，而是有策略地提前拉取用户极可能访问的资源，让后续跳转近乎瞬时完成。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- Webpack 层面用
/* webpackPrefetch: true */（空闲时加载）或/* webpackPreload: true */（关键资源优先加载） - Vue Router 中可结合导航守卫，在用户停留首页 2 秒后，预加载“关于我们”“联系我们”等低频但高价值页面
- 鼠标悬停链接时触发预加载：监听
@mouseenter，调用import()并缓存 Promise，点击时直接复用 - 注意网络条件判断：在 3G 或低带宽环境下自动禁用预加载，避免浪费流量
组件级按需加载：更细粒度的资源控制
除了路由，表单、弹窗、富文本编辑器等重型组件也适合懒加载，尤其当它们仅在特定操作后才出现。
立即学习“前端免费学习笔记（深入）”；
- 使用
defineAsyncComponent包装非首屏组件：const Editor = defineAsyncComponent(() => import('@/components/Editor.vue')) - 在 Form 组件中，通过
componentMap动态注册字段类型，如ApiSelect、Upload等只在用到时才加载 - 避免在全局注册重型 UI 库组件（如图表、树形控件），改用局部异步引入
验证与调优：确认策略真正生效
光写对语法不够，得验证是否真的分包、是否按预期加载。
- 构建后检查 dist 目录：应看到多个
xxx.[hash].js文件，而非仅一个大 bundle - 打开 Chrome DevTools → Network 标签，切换路由，观察是否触发新 JS 请求，且 size 合理
- 使用
performance.mark()+performance.measure()埋点，对比优化前后关键路由加载耗时 - 在生产环境开启 sourcemap（仅用于调试），配合 chunk 名称快速定位加载逻辑
