缓存策略怎么选？强缓存和协商缓存到底怎么用才对？

Mr.景源提问于 2026-03-16 17:45:19 阅读 55

优化

我最近在优化项目加载速度，看到浏览器缓存有强缓存和协商缓存两种，但搞不清实际场景该用哪个。比如静态资源像 JS、CSS 文件，我试过加 Cache-Control: max-age=31536000，但更新后用户还是拿不到新文件，是不是得配合文件名哈希才行？

另外，接口数据用协商缓存的话，服务器要返回 ETag 或 Last-Modified，但我用的 Nginx 静态托管，API 是另一个服务，配置起来有点混乱。有没有一套清晰的缓存策略可以参考？

我来解答赞 9 收藏

反馈

1 条解答

开发者鉴恒 Lv1

静态资源用强缓存+文件名哈希是标配。光设 max-age 没用，文件名必须带 hash（比如 app.abc123.js），每次发布改内容哈希值就变，URL 变了浏览器自然重新请求。接口用协商缓存，Nginx 默认就支持 ETag，开起来就行。

# 静态资源 -强缓存一年，文件名带hash的

location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {

    expires 1y;

    add_header Cache-Control "public, max-age=31536000";

}



# API - 协商缓存

location /api/ {

    etag on;

}

检查一下你的构建工具（webpack/vite/rollup），输出文件名配置成 contenthash 模式就行。

2026-03-16 19:09