单页应用中强缓存需分层配置：html禁用强缓存以防白屏，js/css用带哈希的长期缓存，路由模块懒加载独立缓存，接口数据改用本地存储+时效控制。
单页应用（SPA）中强缓存不能“一刀切”，得按资源类型分层配置：HTML 必须禁用强缓存，JS/CSS 用带哈希的长期强缓存，路由模块配合懒加载独立缓存，接口数据则绕过 HTTP 缓存、改用本地存储+时效控制。
HTML 文件：必须禁用强缓存
SPA 的入口 HTML 是所有资源的“清单”，一旦缓存旧版，后续 JS/CSS 即使更新了也加载不到新逻辑，极易导致白屏或功能异常。
- 服务端对 index.html 设置
Cache-Control: no-cache, must-revalidate或max-age=0 - 避免使用
Expires，因其依赖客户端时间，误差风险高 - 确保每次构建后 HTML 中引用的 JS/CSS 路径已更新（构建工具如 Webpack/Vite 默认支持）
JS/CSS/图片等静态资源：启用长期强缓存 + 内容哈希
这些资源内容稳定、体积大、复用率高，适合强缓存，但前提是 URL 随内容变化——否则浏览器永远用旧版本。
- 构建时生成带 contenthash 的文件名，例如
app.a1b2c3.js、vendor.e4f5d6.css - 服务端对匹配
.js$、.css$、\.(png|jpg|gif)$的路径统一设置：Cache-Control: public, max-age=31536000, immutable -
immutable表示该资源内容不会变更，浏览器无需在 URL 不变时发起验证请求
路由级 JS 模块：懒加载 + 独立 chunk 缓存
用户不会一次性访问所有路由，按需加载既能减少首屏体积，又能让每个路由的 JS 拥有独立缓存生命周期。
- 用
import()实现动态导入：const Home = () => import('./views/Home.vue') - Webpack/Vite 自动拆包，每个路由生成独立 chunk（如
home.8a3f2d.js） - 公共依赖（React、lodash 等）抽成
common.f9d12a.js，多个路由共享同一缓存 - 配合
splitChunks和魔法注释（如/* webpackChunkName: "user" */），便于定位和调试
接口数据：不走 HTTP 强缓存，改用可控本地缓存
API 返回的数据实时性要求高，强缓存会掩盖状态变更。应跳过 HTTP 缓存头，由 JS 主动管理。
- 请求时显式设置
cache: 'no-store'，防止浏览器自动缓存响应 - 将结果存入
localStorage或Cache API，并附带时间戳和 TTL（如 5 分钟） - 读取前先判断是否过期；未过期则直接渲染，同时后台静默 fetch 更新
- 敏感操作（如支付、密码修改）跳过缓存，或清除相关 key
不复杂但容易忽略：强缓存生效的前提是 URL 变了，而 URL 是否变化，取决于构建是否生成内容哈希——没哈希，再长的 max-age 也没用。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
