如何在网站中实现加载时跳过browser cache，避免访问到旧版本内容？

1 配置HTTP缓存控制头 #

这是从根源控制缓存行为的核心手段，直接在服务端/CDN的响应头中设置即可：

• 对HTML入口文件设置 Cache-Control: no-cache，no-cache并非禁止缓存，而是要求浏览器每次使用该文件前必须向服务器校验是否为最新版本，不会直接使用本地缓存。
• 对JS、CSS、图片等静态资源设置 Cache-Control: public, max-age=31536000, immutable，开启一年的长缓存，同时告知浏览器资源内容不会随文件名不变而修改，无需重复校验。
• 同时配置ETag或Last-Modified校验头：服务器为每个资源生成唯一的内容标识ETag或最后修改时间，浏览器后续请求会携带If-None-Match（对应ETag）或If-Modified-Since（对应Last-Modified）头，服务器比对后如果资源未更新直接返回304状态码复用本地缓存，更新则返回200状态码+最新内容。

禁止给HTML入口文件设置长周期的max-age强缓存，否则浏览器会直接复用本地的旧入口文件，不会向服务器发送校验请求。

2 静态资源哈希命名策略 #

和长缓存配置搭配使用，彻底避免静态资源的旧缓存问题：

• 打包构建阶段，给所有JS、CSS、图片等静态资源的文件名加入内容哈希值，例如index.7f2a3d9.js，只要资源内容发生修改，哈希值就会变化，文件名也会同步更新，浏览器自然会请求新资源而不会复用旧缓存。
• 如果暂时无法修改文件名，也可以给资源引用路径加版本查询参数，例如style.css?v=20240520，每次站点更新后修改版本号即可强制拉取新资源。

3 特殊场景适配配置 #

• 单页应用（SPA）需要配置服务端路由重定向规则，将所有未匹配到静态资源的请求统一 fallback 到最新的index.html入口，避免用户访问旧路由时加载到缓存的旧入口文件。
• 如果站点使用了CDN服务，需要配置发布新版本后自动刷新CDN缓存的规则，避免CDN节点返回旧的资源内容。
• 对实时性要求极高的动态内容，可直接设置Cache-Control: no-store完全禁用缓存，每次请求都拉取最新内容。

内容的提问来源于stack exchange，提问作者Jayden