网站加载不存在的CSS文件，修改CSS后样式不更新该如何解决？

成因 #

• 浏览器本地缓存：静态资源默认会被浏览器缓存到本地，只要缓存未过期，浏览器不会向服务器发起资源请求，直接读取本地缓存的旧文件，哪怕服务器端原文件已删除也不受影响。
• 服务端/CDN缓存配置问题：站点托管的服务器、CDN节点如果给CSS等静态资源配置了过长的缓存有效期（比如1年），在缓存到期前，节点会直接返回存储的旧资源，不会同步源站的更新。
• 错误的引用规则：部分托管平台的路由规则、反向代理配置可能会把CSS请求定向到旧的资源备份，导致新文件无法被加载。

彻底解决方法 #

• 临时验证方案：Chrome访问页面时按下Ctrl+Shift+R（Mac系统为Cmd+Shift+R）执行强制刷新，跳过本地缓存拉取服务器资源，若样式更新则可确认是缓存导致的问题。
• 调整缓存响应头：在服务器配置中调整静态资源的缓存规则，给HTML文件设置Cache-Control: no-cache，要求浏览器每次访问都校验资源是否更新；CSS/JS等资源可设置长缓存，但配合资源指纹方案使用。
• 自动资源指纹（替代手动改名）：无需手动修改文件名，在站点打包构建阶段自动给CSS/JS文件名添加内容哈希值，例如style.f8d329.css，文件内容变更时哈希值会同步变化，HTML中的引用路径也会自动更新，既可以最大化利用缓存提升加载速度，也完全避免缓存导致的更新不生效问题。
• 清理节点缓存：如果使用了CDN或托管平台的静态缓存服务，每次更新站点资源后手动触发缓存刷新，删除所有节点存储的旧资源。

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