<p>Vue Router 路由懒加载需配合预加载策略实现性能优化：基础是动态 import() 实现按需加载，正确写法为 component: () => import('@/views/Order.vue')；Prefetch 为可选策略，需显式标记 / webpackPrefetch: true /，在空闲时低优先级预取后续可能访问的资源，如「我的订单」「设置页」等高频路径。</p>
Vue Router 的路由懒加载本身不自动预加载，预加载需要额外策略配合。核心是“按需加载 + 有判断地提前准备”，不是所有路由都预载，而是对用户大概率下一步访问的模块，在空闲时低优先级拉取。
懒加载是基础：必须用动态 import()
所有路由组件必须写成函数形式，返回 Promise，才能被构建工具识别为异步 chunk：
- ✅ 正确写法：
component: () => import('@/views/Order.vue') - ❌ 错误写法：
component: Order（静态导入，打进主包） - 推荐加注释命名 chunk，方便调试和缓存：
() => import(/* webpackChunkName: "order" */ '@/views/Order.vue')
Prefetch 是可选策略：只对高转化路径开启
Prefetch 不是默认行为，需主动标记。它让构建工具在 HTML 中注入 <link rel="prefetch">，浏览器在空闲时下载资源，不阻塞首屏。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 适用场景：登录后必跳首页、列表页点击“查看详情”前 hover、导航栏中高频二级入口（如「我的订单」「购物车」）
- 在路由配置中添加自定义 meta 标记：
meta: { prefetch: true } - Vite 或 Webpack 会自动识别注释并注入 prefetch link：
() => import(/* webpackPrefetch: true */ '@/views/Settings.vue')
区分 preload 和 prefetch，避免误用
两者都生成 <link rel>，但调度逻辑完全不同：
立即学习“前端免费学习笔记（深入）”；
-
preload：用于当前导航强依赖的资源（如首屏图表组件、关键字体），浏览器以最高优先级下载；写法：
import(/* webpackPreload: true */ '@/components/Chart.vue') -
prefetch：用于后续导航可能用到的资源（如帮助页、设置页），浏览器空闲时低优先级下载；写法：
import(/* webpackPrefetch: true */ '@/views/Help.vue') - 错把详情页用 preload，会导致首屏变慢；把首页用 prefetch，则可能错过关键时机
进阶控制：结合路由守卫或用户行为
纯静态标记不够灵活，可按需动态触发：
- 在全局前置守卫中，检测目标路由是否带
prefetch: true，再手动调用 import() 启动预加载 - 监听按钮 hover 或 focus 事件，在用户明显有跳转意图时触发预加载（例如悬停「订单管理」菜单项时预取 OrderList.vue）
- 根据网络状况（navigator.onLine、effectiveType）或设备类型（移动端慎用 prefetch）做条件开关
