javascript不直接控制强缓存,需通过内容哈希文件名实现静态资源长期缓存、html禁用强缓存,并配合服务端cache-control策略与service worker精准管理。

JavaScript 本身不直接控制浏览器强缓存,但可以通过构建策略、资源引用方式和服务端配合,让强缓存既高效又不失更新能力。关键不是“绕过”强缓存,而是让它“聪明地缓存”——静态资源长期缓存,HTML 文件不缓存或短缓存,靠文件名或查询参数触发新版本加载。
给静态资源加内容哈希(推荐首选)
构建工具(如 Webpack、Vite、Rollup)在打包时自动为 JS/CSS/图片等生成带哈希值的文件名,例如 app.a1b2c3.js。只要文件内容变化,哈希就变,文件名也变。这样:
- 浏览器认为是全新资源,必然发起请求,不会复用旧缓存
- 服务端可放心设置
Cache-Control: public, immutable, max-age=31536000 - HTML 中引用的是新文件名,自然加载最新版
HTML 文件必须禁用强缓存
HTML 是入口,它决定了加载哪些 JS/CSS。如果 HTML 被强缓存,哪怕 JS 文件已更新,用户仍会加载旧 HTML,从而引用旧资源路径。
服务端应为 .html 响应设置:
-
Cache-Control: no-cache, must-revalidate(触发协商缓存) - 或更严格:
no-store(完全不缓存) - 同时配
Pragma: no-cache和Expires: 0
这样每次访问 HTML 都会向服务器验证,确保拿到最新版本。
你接手一个需求时,是不是经常这样:"改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续";这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境(JDK、Spring Boot、ORM、数据库、前端框架),记在
避免用 ?v= 时间戳或随机数破坏缓存有效性
手动在 URL 后加 ?v=1.2.3 或 ?t=1723002000 看似简单,但有隐患:
- 若版本号没随内容变化(比如只改了代码但忘了改 v 值),缓存不会更新
- 若每次构建都加随机数,浏览器无法复用任何缓存,失去强缓存意义
- CDN 可能忽略查询参数,导致缓存穿透
真正可靠的方式是哈希文件名,而非依赖查询参数。
配合 Service Worker 实现精准控制(进阶)
当需要离线支持或更细粒度缓存策略时,可用 Service Worker 主动管理缓存:
- 安装阶段预缓存核心资源(含哈希文件名)
- fetch 事件中优先匹配 cache,未命中再请求网络
- 更新 SW 脚本时,自动清除旧 cache 并载入新资源列表
注意:SW 的更新依赖 HTML 文件刷新,所以 HTML 缓存策略仍是前提。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










