最近在项目上调整了前端调用 API 时 header 的内容,发布后发现由于用户本地缓存,导致 header 内容不对,进而请求 API 接口失败。 因为是内部项目,以往都是告诉用户清除一下缓存再使用,但是感觉不太优雅,而且浏览器还会缓存一些用户自定义的 table 样式,无脑的清除缓存也存在一些问题。 请各位大佬赐教!
1
richangfan 2022-07-09 09:37:52 +08:00
接口和 index.html 文件设置 max-age 之类的响应头,其他文件不需要
|
2
dcsuibian 2022-07-09 10:02:09 +08:00 via Android 1
改名字,html 不缓存。
举个例子,如果原来的 js 文件是 a.js ,新的 js 文件是 b.js 。 在 html 里原来的 link 指向 a.js ,现在就变成指向 b.js 。浏览器发现文件名不同就会再发出请求。a.js 的缓存仍然有效,但 a.js 已经不会再使用了。 |
3
dcsuibian 2022-07-09 10:06:33 +08:00 via Android
现代点的前端就是这么干的,webpack 就可以。
把需要的静态资源分割成块,每一块计算哈希值。文件变化后对应块的哈希值变了。同时帮你修改生成的 index.html 。 这样没变的块仍然可以走缓存(比如说依赖的类库啥的),变了的块就用新的。 |
4
dcsuibian 2022-07-09 10:17:09 +08:00 via Android
还有一种不改文件名的方式,是加入查询参数。
比如 a.js?ppp=xxxxxxxxx |
5
YNaN 2022-07-09 10:22:49 +08:00
脚手架出入口的 hash 命名规则改下
|
6
wanguorui123 2022-07-09 10:37:38 +08:00
用 ETag 然后把 Cache 设置短点
|
7
kekxv 2022-07-09 11:48:11 +08:00 via iPhone
你们自己问题,没事瞎改拦截,还不兼容上一版本
|
8
wu67 2022-07-09 12:09:27 +08:00
现在的脚手架工具默认都是 build 的时候给文件加上 hash 了吧. 除非你那个用户就开着页面一直不刷新, 只在当前页面点点点, 这样 index.html 里面的 js 路径貌似不会变...
|
9
arch9999 2022-07-09 12:21:00 +08:00
```
<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 看看本页面。 |
10
wangkun025 2022-07-09 12:28:16 +08:00
Rails 框架用的是改名字吧。
|
11
Pooc 2022-07-09 12:45:29 +08:00
像 Webpack 、Vite 之类的打包,生成的 js 之类的静态文件默认会改哈希值文件名,只需要运维设置下 index.html 不缓存就可以了
|
12
agagega 2022-07-09 12:46:37 +08:00
Rails 的方案是:假如目标文件叫 vendor.js ,那最终输出的文件就是 vendor-xxxxx.js (一段 hash),不用 query string 是因为某些地方做缓存的时候说不定也会把 query string 忽略掉
|
13
LeegoYih 2022-07-09 12:52:17 +08:00
请求静态文件加时间戳或签名就行,如:main.min.js?t=123456
|
14
suyanhanx 2022-07-10 22:03:43 +08:00
大公司里怎样开发和部署前端代码? - 张云龙的回答 - 知乎
https://www.zhihu.com/question/20790576/answer/32602154 |
15
mingdongshensen 2022-07-17 17:06:49 +08:00
ServiceWorker + Notification APIs, 在主线程里根据推送来的消息内容自定义任何你想做的 dom 相关操作,比如这时候可以主动通过推送告诉用户网页更新版本了,让用户点击一个你提供的小按钮,触发网页重载
|
16
mingdongshensen 2022-07-17 17:14:06 +08:00
@dcsuibian 我感觉还需要一个推送功能,及时告诉用户,此时此刻你的 html 不是最新版本,你需要手动刷新页面或者你需要同意我帮你自动刷新一下页面
|