站点发布更新时处理缓存问题的最佳实现方案是什么？

1. 分层配置浏览器缓存规则 #

• 可哈希命名的静态资源（JS、CSS、图片、字体等）：发布时自动生成带内容哈希的文件名，例如main.7a2f9b.js，这类资源配置长缓存规则，在S3上传时直接指定响应头Cache-Control: public, max-age=31536000, immutable，CloudFront会透传该头到浏览器，只要内容不变就会一直复用缓存，内容更新后哈希变化文件名不同，自然不会命中旧缓存。
• 不可哈希的入口文件（HTML、service worker脚本等）：配置短缓存/不缓存规则，指定响应头Cache-Control: public, max-age=0, no-cache, must-revalidate，确保用户每次访问都会回源校验文件是否为最新版本，避免入口文件长期滞留在用户本地缓存。

2. AWS服务端缓存失效配置 #

• 每次发布完成后，主动触发CloudFront缓存失效操作，可选择清空全路径/*或者仅清空入口文件路径，普通AWS账号每月有1000条免费失效配额，完全覆盖常规发布需求。可集成到CI/CD流程自动执行，对应AWS CLI命令为：aws cloudfront create-invalidation --distribution-id 你的CloudFront分发ID --paths "/*"
• 若使用S3作为静态资源存储，上传资源时需明确指定Cache-Control头，覆盖S3默认的缓存配置，避免入口文件被误加了长缓存头。
• 若使用EC2部署动态服务，给动态接口配置Cache-Control: no-cache响应头，同时在CloudFront中针对动态路径单独配置缓存行为，设置TTL为0跳过CDN缓存直接回源拉取最新内容。

3. 极端场景兜底方案 #

可在前端增加版本校验逻辑：后端维护当前最新的站点版本号，前端初始化时异步请求最新版本号和本地存储的版本号做对比，若版本不一致则主动调用location.reload(true)强制跳过本地缓存刷新页面，也可以弹出更新提示引导用户手动刷新。

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