核心是让路由组件加载更早、更准、更轻：通过悬停预热、登录后预加载、分步表单预取等主动策略提前触发动态import()，结合人工代码分割、共享chunk复用、手动chunk命名、loading组件兜底、prefetch/preconnect优化及Brotli压缩，实现非阻塞、高命中、低延迟的路由加载体验。
核心是让路由组件加载更早、更准、更轻：不等用户点开才开始动，而是预判行为、压缩资源、减少阻塞。
提前触发加载时机
动态 import() 是 Promise，但别只等到导航那一刻才调用。结合用户意图主动预热：
- 鼠标悬停在菜单项上 300ms 后，用
import()触发对应路由模块加载（不渲染，只下载并缓存） - 用户完成登录后，立刻预加载后台类路由（如
/admin/*下所有页面），它们大概率会被访问 - 分步表单中，当前页提交成功后立即
import()下一页组件，用户点击“下一步”时几乎无等待
精细控制代码分割粒度
默认按文件切 chunk 容易冗余，需人工干预提升复用与缓存效率：
- 把强耦合的子组件和父页面一起打包（例如 Dashboard.vue 和它内部的 ChartWidget.vue），避免多次请求
- 将通用工具函数、API 封装抽成独立的
shared-utilschunk，被多个懒加载页面复用，提高缓存命中率 - 禁用自动命名（如
webpackChunkName），手动指定 chunk 名称，防止同名覆盖或混淆
加载过程不阻塞交互体验
动态加载不能让用户面对白屏或卡顿，要保障可感知的流畅性：
立即学习“Java免费学习笔记（深入）”；
- 路由配置中必须设置 loading 组件（如骨架屏），Vue Router 的
<suspense>或 React 的Suspense + lazy可自动接管 - 在
import()外层加try/catch，失败时 fallback 到轻量提示页（含重试按钮），不中断整个路由系统 - 对非关键路由（如「帮助中心」「404」），可用
fetch(..., { priority: 'low' })或rel="preload"延后加载
优化网络传输链路
真正拖慢速度的往往是网络请求本身，而非 JS 执行：
- 在 HTML 中为高频路由 chunk 添加
<link rel="prefetch">，让浏览器空闲时提前下载（仅限首屏后 2~3 个高概率路径） - 对跨域资源（如微前端子应用），提前用
<link rel="preconnect">建立 DNS + TCP + TLS 连接 - 确保服务器启用 HTTP/2 或 HTTP/3，并开启 Brotli 压缩，chunk 体积通常能缩小 30% 以上
