“秒级响应”依赖浏览器缓存、代码分割与本地数据缓存三层协同：静态资源靠内容哈希+强缓存，路由模块按需加载并独立缓存，接口数据采用localStorage+TTL预读+后台更新，Service Worker补足离线与首屏体验。
前端路由切换时的“秒级响应”，不是靠禁用缓存，而是让浏览器缓存、代码分割和本地数据缓存三层协同工作：静态资源走强缓存不重复下载，路由模块按需加载并独立缓存，接口数据提前读取+后台更新。关键在分层控制，而不是统一开关。
静态资源靠内容哈希 + HTTP 强缓存
JS、CSS、图片等构建产物必须带内容哈希（如 app.a1b2c3.js），服务端对这类文件返回：
- Cache-Control: public, max-age=31536000（一年）
- 确保浏览器直接复用，不发请求
- HTML 文件则相反：设为 Cache-Control: no-cache 或 max-age=0，强制每次校验 ETag 或 Last-Modified
这样，用户二次访问时，90% 以上资源从磁盘缓存秒取，只有 HTML 会走一次条件请求，确认是否需要重载新版本。
路由模块按需加载 + 独立 chunk 缓存
每个页面路由用 dynamic import() 懒加载，Webpack/Vite 会自动拆成独立 chunk：
立即学习“Java免费学习笔记（深入）”；
- /user 对应 user.f4e5d6.js，首次访问才下载
- /order 对应 order.78a9b0.js，未访问不加载
- 公共依赖（React、工具函数等）抽成 common.c2d3e4.js，多个路由复用同一份缓存
由于文件名含哈希，只要代码没变，浏览器就永远命中缓存；一旦修改，URL 变化，自然跳过旧缓存——无需手动清理。
接口数据用 localStorage + 时间戳 TTL 控制
路由切换常伴随数据拉取（如用户信息、菜单列表）。可先读缓存渲染，再后台更新：
- 读取前检查 localStorage.getItem('menu') 和对应时间戳
- 若存在且未超时（例如设置 TTL=5 分钟），直接解析渲染
- 同时发起 fetch 请求，新数据返回后写入缓存并刷新视图
- 高频变动或敏感数据（如订单详情）跳过缓存，或 fetch 时加 cache: 'no-store'
这样首屏几乎无等待，用户看到的是“已有数据”，后台静默刷新保证最终一致。
Service Worker 补足离线与首屏体验
注册 Service Worker，在 install 阶段预缓存核心资源：
- /index.html、/app.js、/manifest.json、关键 CSS
- fetch 时对静态资源用 cache-first，优先返回缓存
- 对 API 请求可用 stale-while-revalidate：先返回旧数据，再拉新数据更新缓存
即使弱网或短暂离线，也能秒出首页和基础路由界面，再逐步填充最新数据。
