如何避免CSS文件重复加载 让浏览器复用已缓存的CSS资源

浏览器默认自带静态资源缓存能力，你遇到的每次跳转页面都重新请求CSS的问题，本质是服务器返回的缓存响应头配置不对，按下面的方法配置即可实现完全复用本地缓存、不发起网络请求：

• 核心配置：给CSS资源返回强缓存响应头
  给CSS文件的HTTP响应加上标准的Cache-Control头即可，推荐配置值为 public, max-age=31536000, immutable：

  • public 代表允许浏览器、中间代理节点缓存该资源
  • max-age=31536000 代表缓存有效期为31536000秒（即1年），有效期内浏览器不会主动向服务器发起请求
  • immutable 明确告知浏览器该资源在有效期内不会发生任何变更，连校验请求都不需要发送，直接读取本地缓存即可，完全满足“不发起网络请求”的需求

• 缓存更新方案
  配置强缓存后如果需要更新CSS样式，不要直接覆盖原路径下的CSS文件，只需要修改页面中CSS的引用地址即可，比如给路径加版本号/内容哈希：

  <!-- 原引用 -->
  <link rel="stylesheet" href="/style.css">
  <!-- 更新样式后修改引用，浏览器会自动拉取新文件，后续继续走缓存 -->
  <link rel="stylesheet" href="/style.css?v=20240528">
  

  更稳妥的方式是根据CSS文件内容生成哈希后缀命名，比如style.a73bc2.css，只要文件内容变了哈希就会变，自动触发新资源拉取，不会出现用户加载旧样式的问题。

• 常见服务端配置示例
  如果你用Nginx托管站点，在配置文件中加入以下规则即可给所有CSS文件加上正确的缓存头：

  location ~* \.css$ {
      add_header Cache-Control "public, max-age=31536000, immutable";
  }
  

  如果用Apache托管，在站点根目录的.htaccess文件中加入：

  <FilesMatch "\.css$">
      Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
  

• 注意避坑

  • 不要给CSS文件配置Cache-Control: no-cache/no-store头：no-cache会让浏览器每次都发请求校验资源是否更新，no-store会完全禁用缓存，每次都重新下载完整文件
  • 不要依赖HTML里的meta标签配置缓存，比如<meta http-equiv="Cache-Control">，目前主流浏览器不会用这类标签的规则约束静态资源缓存，只有服务器返回的HTTP响应头才会生效
  • 本地开发时如果开了浏览器开发者工具的「禁用缓存（Disable cache）」选项，不管怎么配置都会强制重新请求资源，上线验证时记得关闭该选项
  • 配置完成后可以打开浏览器开发者工具的网络面板验证，如果CSS请求的状态显示200 OK (from disk cache)或者200 OK (from memory cache)，就说明已经成功复用本地缓存，没有发起网络请求。

如果你不需要完全禁止网络请求，只需要减少资源传输体积，可以配置协商缓存（Last-Modified/ETag响应头），这种模式下浏览器每次还是会发请求，但如果资源没更新服务器会返回304状态码，不会传输CSS文件内容，不过这种方案还是会产生网络请求，不符合当前的需求。

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