网站静态资源缓存怎么配？强缓存、协商缓存与版本号的 3 个要点

导读：网站图片、CSS、JS 加载慢，多半不是带宽问题，是缓存没配好：要么什么都不缓存每次重新下载，要么缓存太狠改版后用户还是旧页面。本文讲清楚强缓存、协商缓存、版本号三件事，配好之后首屏提速立竿见影。

一、强缓存：命中后不发请求

强缓存命中后浏览器直接从本地取，不发任何请求，是提速的第一层。通过响应头 Cache-Control 控制：

location /static/ {
    # 图片、字体、CSS、JS 等静态资源
    add_header Cache-Control "public, max-age=31536000, immutable";
}

要点：强缓存只适合「文件名会变」的资源——因为一旦缓存了，浏览器在过期前不会来问服务器，资源改了也拿不到新版。所以配强缓存的前提是配合版本号（见第三节）。

二、协商缓存：每次确认，变了就重下

协商缓存适合「内容可能变、但文件名不变」的资源：浏览器每次都会带缓存标识问服务器，服务器说"没变"就返回 304，说"变了"就回 200 带新内容。核心是 ETag（内容指纹）：

location / {
    etag on;                      # 按内容生成指纹
    add_header Cache-Control "no-cache";  # 每次都协商，不强制缓存
}

# 浏览器请求头（自动带上上次的指纹）
If-None-Match: "5d8c72a2-1e9a"
# 服务器响应：没变则 304 空 body
HTTP/1.1 304 Not Modified

要点：协商缓存省的是「传输成本」不是「请求成本」，每次仍有一次往返，适合 HTML 这类变化频繁的页面；静态资源用强缓存+版本号，页面用协商缓存，各司其职。

三、版本号：文件名变了，缓存自动失效

强缓存的痛点是"改版后用户拿旧文件"，解法是改文件名：把版本号或内容哈希拼进文件名，文件名一变，强缓存自动落空，浏览器自然去下新的：

# 构建时生成带哈希的文件名
app.a1b2c3.js    # 内容变了 → app.d4e5f6.js
style.v2.css     # 手动版本号
logo.20260928.png

要点：版本号要跟着内容变，光改内容不改文件名，强缓存会把旧版缓存到过期；HTML 里引用新文件名，页面一刷新就拿到新资源。

四、缓存策略对照表

要点：全站一把梭配 max-age=31536000 是最常见的坑——HTML 也被强缓存，改版用户永远看到旧页面；按资源类型分策略，静态资源往死里缓存，HTML 每次协商。

五、踩坑清单

1. 什么都不配：静态资源每次重新下载，首屏慢一倍；
2. 全站强缓存：HTML 也被缓存，改版后用户看不到新页面；
3. 改了内容不改文件名：强缓存把旧版锁到过期；
4. 协商缓存配在静态资源上：每次请求白费一次往返；
5. CDN 与源站缓存头不一致：CDN 缓存混乱，回源频繁或拿到旧内容；
6. 版本号手动维护：漏改一个文件，线上又是新旧混搭；
7. 接口数据乱配缓存：动态数据被强缓存，列表不更新。

六、工程落地建议

缓存按「静态资源强缓存 + 页面协商缓存 + 文件名版本号」三层配置，静态资源锁本地、页面每次确认、改版靠改名。同类分层在乔拓云企业网站的静态资源缓存模块中有对应实现，中小企业官网可直接参照该模块的缓存头配置起步。

七、复盘清单

• 图片/CSS/JS 配强缓存 + 哈希文件名；
• HTML 配协商缓存，不强制缓存；
• 版本号随内容变更，引用同步更新；
• CDN 与源站缓存头一致；
• 改版后用无痕窗口验证新资源生效。

结语

缓存配置三句话：静态资源放心缓存，页面每次确认，内容变了就改名。配好这三层，首屏提速看得见，改版上线也不再背着旧缓存的锅。