1
前端发布新版本后，如何自动清除用户浏览器页面缓存，有哪些方案？
source link: https://www.v2ex.com/t/865053
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
最近在项目上调整了前端调用 API 时 header 的内容，发布后发现由于用户本地缓存，导致 header 内容不对，进而请求 API 接口失败。 因为是内部项目，以往都是告诉用户清除一下缓存再使用，但是感觉不太优雅，而且浏览器还会缓存一些用户自定义的 table 样式，无脑的清除缓存也存在一些问题。 请各位大佬赐教！
13 条回复 • 2022-07-09 12:52:17 +08:00
 |
richangfan 10 小时 13 分钟前 接口和 index.html 文件设置 max-age 之类的响应头，其他文件不需要
|
 |
dcsuibian 9 小时 49 分钟前 via Android 改名字，html 不缓存。
举个例子，如果原来的 js 文件是 a.js ，新的 js 文件是 b.js 。 在 html 里原来的 link 指向 a.js ，现在就变成指向 b.js 。浏览器发现文件名不同就会再发出请求。a.js 的缓存仍然有效，但 a.js 已经不会再使用了。 |
1 |
dcsuibian 9 小时 44 分钟前 via Android 现代点的前端就是这么干的，webpack 就可以。
把需要的静态资源分割成块，每一块计算哈希值。文件变化后对应块的哈希值变了。同时帮你修改生成的 index.html 。 这样没变的块仍然可以走缓存（比如说依赖的类库啥的），变了的块就用新的。 |
|
dcsuibian 9 小时 34 分钟前 via Android 还有一种不改文件名的方式，是加入查询参数。
比如 a.js?ppp=xxxxxxxxx |
 |
YNaN 9 小时 28 分钟前 脚手架出入口的 hash 命名规则改下
|
 |
wanguorui123 9 小时 13 分钟前 用 ETag 然后把 Cache 设置短点
|
 |
kekxv 8 小时 3 分钟前 via iPhone 你们自己问题，没事瞎改拦截，还不兼容上一版本
|
 |
wu67 7 小时 41 分钟前 现在的脚手架工具默认都是 build 的时候给文件加上 hash 了吧. 除非你那个用户就开着页面一直不刷新, 只在当前页面点点点, 这样 index.html 里面的 js 路径貌似不会变...
|
 |
arch9999 7 小时 30 分钟前 ```
<link rel="stylesheet" href="/static/css/vendor/tomorrow.css?v=3c006808236080a5d98ba4e64b8f323f" type="text/css"> <link rel="icon" sizes="192x192" href="/static/icon-192.png"> <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon-180.png?v=91e795b8b5d9e2cbf2d886c3d4b7d63c"> ``` 按 F12 看看本页面。 |
 |
wangkun025 7 小时 22 分钟前 Rails 框架用的是改名字吧。
|
 |
Pooc 7 小时 5 分钟前 像 Webpack 、Vite 之类的打包，生成的 js 之类的静态文件默认会改哈希值文件名，只需要运维设置下 index.html 不缓存就可以了
|
 |
agagega 7 小时 4 分钟前 Rails 的方案是：假如目标文件叫 vendor.js ，那最终输出的文件就是 vendor-xxxxx.js (一段 hash)，不用 query string 是因为某些地方做缓存的时候说不定也会把 query string 忽略掉
|
 |
LeegoYih 6 小时 58 分钟前 请求静态文件加时间戳或签名就行，如：main.min.js?t=123456
|
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK