nginx 配置强缓存和协商缓存,实现静态资源更新后网页重新加载

426 阅读1分钟

强缓存:浏览器不与服务端协商直接取浏览器缓存, 校验两个字段 Expires 和 Cache-Control 的max-age字段

协商缓存:浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源,ETag 和 Last-Modified, 配对If-None-Match 和 If-Modified-Since

image.png

# map $uri $etag { ~^(?<prefix>.+)-(?<hash>[0-9a-f]{32})\.(?<extension>.+)$ $hash; }
location ^~/static/ {
   root html/project
   # 关闭强缓存
   add_header Cache-Control "no-cache, must-revalidate, max-age=0";
   add_header Pragma "no-cache";
   expires off;
   
   # 打开协商缓存
   # 如果是根据名称的hash生成etag, 用 etag $etag;
   etag on;
   etag_hash on;
   # 哈希算法 sha1 或 MD5CRC32
   etag_hash_method sha1;
}

无缓存:浏览器直接向服务器重新获取资源

location /static/ {
   root html/project
   # 关闭强缓存
   add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0";
   add_header Pragma "no-cache";
   expires off;
   
   # 关闭协商缓存
   etag off;
}