Vue.js路由懒加载与预加载是分阶段协同的组合策略：懒加载按需拆包减小首屏体积，预加载在空闲时低优先级预取高转化路径资源，二者配合实现代码在“对的时间”以“对的方式”到达浏览器。
Vue.js 路由懒加载与预加载不是“选一个用”，而是分阶段协同工作的组合策略：懒加载解决初始包过大问题，预加载缓解后续跳转等待感。核心在于让代码在“对的时间”以“对的方式”到达浏览器。
路由懒加载：按需拆包，减小首屏体积
懒加载的本质是把每个非首屏路由组件单独打包成 chunk，只在用户访问对应路径时才发起请求。它不靠插件或额外配置，依赖原生 import() 语法和构建工具（Vite/Webpack）的自动识别能力。
- 必须写成函数形式：
component: () => import('./views/Order.vue')，不能写成component: Order（静态导入会打进主包） - 推荐加魔法注释命名 chunk：
import(/* webpackChunkName: "order" */ './views/Order.vue')，便于调试、分析和长期缓存控制 - 适合所有非首页、非登录页等非首屏必现的路由，比如 /about、/help、/profile 等
预加载（Prefetch）：空闲时提前拉取，提升感知速度
Prefetch 不是立刻下载，而是在浏览器空闲时以低优先级预取资源。它不会阻塞首屏，但能显著缩短用户点击后的真实加载时间。
- 只对高转化路径启用，例如：登录成功后大概率跳转的首页、列表项 hover 后大概率点开的详情页、导航栏中“我的订单”这类高频二级入口
- 现代构建工具支持注释标记：
import(/* webpackPrefetch: true */ './views/Order.vue')或import(/* vitePrefetch: true */ './views/Order.vue') - Vue Router 中也可通过 meta 字段标记：
{ path: '/order', component: () => import('./views/Order.vue'), meta: { prefetch: true } }，再配合构建工具自动注入<link rel="prefetch">
Preload 与 Prefetch 别混用
两者都生成 <link> 标签，但调度逻辑完全不同，用错会适得其反。
立即学习“前端免费学习笔记（深入）”；
-
Preload：用于当前导航强依赖的资源，如首屏关键组件、核心字体、主布局模块；浏览器以最高优先级下载，写法是
import(/* webpackPreload: true */ './components/Header.vue') - Prefetch：用于后续导航可能用到的资源，如设置页、帮助页、用户中心；浏览器在空闲时低优先级下载，避免抢占带宽
- 错误示例：给详情页组件加
webpackPreload，会导致首屏变慢；给首页组件加webpackPrefetch，则毫无意义——它本来就要立刻加载
进阶控制：按需触发，兼顾网络与设备
真实场景中，预加载不该无条件执行。可结合用户行为、网络状况或权限动态控制。
- 在路由守卫中判断：比如登录成功后，再主动调用
import('./views/Dashboard.vue')触发 prefetch - 监听
navigator.onLine或使用NetworkInformation API（如navigator.connection.effectiveType），在 4G/5G 下开启 prefetch，在 2G 或离线时关闭 - 对低端设备或内存紧张环境，可通过
performance.memory或 UA 判断，降级或跳过 prefetch
