单页应用路由切换时需分层缓存：HTML设no-cache确保校验，JS/CSS用内容哈希+max-age=31536000长期缓存；路由模块懒加载独立chunk并提取公共chunk；接口数据本地存储+时效控制；Service Worker预缓存核心资源并按场景选用cache-first或stale-while-revalidate策略。
单页应用（SPA）路由切换时，浏览器默认不会重新请求 HTML 文件，但 JS、CSS 和接口数据的缓存行为直接影响页面渲染速度与数据新鲜度。关键不是“禁用缓存”，而是分层控制：静态资源靠 HTTP 缓存，路由模块靠代码分割+内容哈希，接口数据靠主动存储+时效管理。
静态资源走强缓存 + 内容哈希
HTML 文件通常设为 Cache-Control: no-cache 或 max-age=0，确保每次访问都校验最新版本；而 JS/CSS/图片等静态资源应配置长期强缓存，例如：
- 构建时生成带哈希的文件名，如
home.8a3f2d.js、vendor.e1b94c.css - 服务端对这类资源返回
Cache-Control: public, max-age=31536000 - 哈希变化 → URL 变化 → 浏览器视为新资源，自动跳过旧缓存
路由模块按需加载 + 独立缓存
利用动态 import() 实现路由级懒加载，每个路由对应一个独立 chunk，天然支持细粒度缓存：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 用户首次访问 /user 时才加载
user.5c2a8e.js，未访问的路由不下载 - 公共依赖（如 React、工具函数）抽成
common.f9d12a.js，多个路由复用同一份缓存 - Webpack/Vite 构建时启用
splitChunks，配合魔法注释命名 chunk，便于调试和缓存追踪
接口数据用 localStorage 或 Cache API 控制
路由切换常伴随数据拉取（如用户信息、菜单列表），可缓存并设置有效期，避免白屏或重复请求：
立即学习“Java免费学习笔记（深入）”；
- 读取前先查
localStorage，若存在且未过期（比如存入时间戳 + TTL），直接渲染 - 同时用
fetch后台更新，新数据返回后再写入缓存并刷新视图 - 敏感或高频变动数据（如订单状态）跳过缓存，或使用
cache: 'no-store'显式控制
Service Worker 增强离线与首屏体验
在安装阶段预缓存核心路由资源，fetch 时优先响应缓存，提升二次访问和弱网表现：
- 缓存
/、/index.html、/app.js、/manifest.json等关键文件 - 对静态资源采用
cache-first，对 API 请求用stale-while-revalidate - 监听
message事件，收到服务端推送的版本更新通知后，触发 skipWaiting + reload
