单页应用中路由预加载与浏览器缓存需分层协同：静态资源靠内容哈希+强缓存头由浏览器自动复用；预加载应使用<link rel="prefetch">声明式触发，避免手动fetch；接口数据禁用HTTP缓存，改用localStorage或Cache API管理；Service Worker可实现预加载即缓存的闭环控制。
单页应用中路由预加载和浏览器缓存可以协同工作，但关键在于“不干扰、不覆盖、不误用”——预加载是主动发起的请求，浏览器缓存是被动复用的机制，二者需分层配合，而非混为一谈。
静态资源：靠 HTTP 缓存头 + 内容哈希自动复用
路由预加载的 JS/CSS 文件（如 user.7d2a9f.js）本质仍是静态资源，应交由浏览器原生缓存机制管理：
- 构建时启用内容哈希（如 Webpack 的
[contenthash]或 Vite 的默认行为），确保文件内容变则文件名变 - 服务器对带哈希的资源返回强缓存头：
Cache-Control: public, max-age=31536000, immutable - 这样即使预加载提前发起了请求，只要该 chunk 已缓存，浏览器会直接从磁盘读取，不走网络
预加载时机：用 <link rel="prefetch"> 借力浏览器调度
不要手动 fetch() 或 import() 做预加载——那绕过了浏览器缓存策略。推荐使用声明式预加载：
- 在路由就绪后（如用户停留首页 1 秒），动态插入：
<link rel="prefetch" href="/js/user.7d2a9f.js"> - 浏览器会按低优先级后台下载，并遵守已配置的缓存规则（包括
max-age和immutable） - 后续真正访问
/user路由时，import('./views/User.vue')会命中已有缓存，瞬间完成模块解析
接口数据：绝不依赖 HTTP 缓存，改用可控本地缓存
路由预加载常伴随数据拉取（例如预取用户菜单），这类响应必须跳过浏览器 HTTP 缓存：
立即学习“Java免费学习笔记（深入）”；
- 请求时显式设置
cache: 'no-store'，防止中间代理或浏览器自动缓存过期数据 - 将响应体 + 时间戳 + TTL（如 5 分钟）存入
localStorage或Cache API - 真正进入路由时，先读本地缓存渲染，再静默
fetch更新；若缓存失效，则等待新请求完成
Service Worker：统一接管，实现“预加载即缓存”闭环
若已注册 Service Worker，可进一步增强预加载的确定性：
- 在预加载触发时，主动调用
caches.open('prefetch').put(...)将资源写入 Cache API - 后续路由加载时，通过
importScripts()或自定义 fetch 拦截，优先从该缓存读取 - 比纯 HTTP 缓存更可控——可按需清理、可区分环境、可记录命中率
