前端发布新版本后，如何自动清除用户浏览器页面缓存，有哪些方案？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 861 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近在项目上调整了前端调用 API 时 header 的内容，发布后发现由于用户本地缓存，导致 header 内容不对，进而请求 API 接口失败。因为是内部项目，以往都是告诉用户清除一下缓存再使用，但是感觉不太优雅，而且浏览器还会缓存一些用户自定义的 table 样式，无脑的清除缓存也存在一些问题。请各位大佬赐教！

header

API

清除

浏览器

16 条回复 • 2022-07-17 17:14:06 +08:00

richangfan

2022-07-09 09:37:52 +08:00

接口和 index.html 文件设置 max-age 之类的响应头，其他文件不需要

dcsuibian

2022-07-09 10:02:09 +08:00 via Android

改名字，html 不缓存。
举个例子，如果原来的 js 文件是 a.js ，新的 js 文件是 b.js 。
在 html 里原来的 link 指向 a.js ，现在就变成指向 b.js 。浏览器发现文件名不同就会再发出请求。a.js 的缓存仍然有效，但 a.js 已经不会再使用了。

dcsuibian

2022-07-09 10:06:33 +08:00 via Android

现代点的前端就是这么干的，webpack 就可以。
把需要的静态资源分割成块，每一块计算哈希值。文件变化后对应块的哈希值变了。同时帮你修改生成的 index.html 。
这样没变的块仍然可以走缓存（比如说依赖的类库啥的），变了的块就用新的。

dcsuibian

2022-07-09 10:17:09 +08:00 via Android

还有一种不改文件名的方式，是加入查询参数。
比如 a.js?ppp=xxxxxxxxx

YNaN

2022-07-09 10:22:49 +08:00

脚手架出入口的 hash 命名规则改下

wanguorui123

2022-07-09 10:37:38 +08:00

用 ETag 然后把 Cache 设置短点

kekxv

2022-07-09 11:48:11 +08:00 via iPhone

你们自己问题，没事瞎改拦截，还不兼容上一版本

wu67

2022-07-09 12:09:27 +08:00

现在的脚手架工具默认都是 build 的时候给文件加上 hash 了吧. 除非你那个用户就开着页面一直不刷新, 只在当前页面点点点, 这样 index.html 里面的 js 路径貌似不会变...

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 看看本页面。