Nginx 中静态资源缓存怎么解决前端打包带 hash 的文件名更新不及时问题-Nginx-PHP中文网

核心是静态资源用哈希文件名+immutable实现强缓存，html禁用强缓存启用协商；需正则精准匹配哈希文件、设expires 1y、add_header cache-control "public, immutable"、清空etag；html配no-cache并保留etag；location顺序须静态资源在前、spa回退在后；cdn自动识别immutable失效旧缓存。

nginx 中静态资源缓存怎么解决前端打包带 hash 的文件名更新不及时问题

核心是让带 hash 的文件走强缓存，同时确保 HTML 每次都拉新——浏览器看到新文件名就自动弃用旧缓存，根本不需要“更新”它。

静态资源配长缓存 + immutable

匹配带哈希特征的文件（不只是后缀），统一设一年有效期并声明不可变：

用正则精准识别哈希文件，比如 location ~* \.[a-f0-9]{8,}\.(js|css|png|jpg|woff2|ttf|svg)$，避免把 debug.js 这类人工命名文件误加 immutable
加上 expires 1y; 提供兼容性 fallback
关键一步：add_header Cache-Control "public, immutable"; —— 告诉现代浏览器该 URL 内容永不变，跳过 If-None-Match 验证，直接复用磁盘缓存
显式清空 ETag：add_header ETag "";，防止 Nginx 默认基于修改时间生成的 ETag 干扰 CDN 或代理缓存判断

HTML 必须禁用强缓存，启用协商机制

index.html 是入口，它的路径不变，但内容必须及时更新，否则引用的新 hash 资源就无法加载：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

对根路径和所有 .html 文件单独配置：add_header Cache-Control "no-cache, must-revalidate";
配合 expires 1m; 或 expires -1;，避免强缓存锁死
保留 Nginx 默认开启的 ETag，让浏览器发起条件请求；服务端可返回 304（未修改）或全新 HTML

注意 location 匹配顺序与 fallback 安全

SPA 应用需支持前端路由，但不能让静态资源请求被错误 fallback 到 index.html：

静态资源 location 块（如匹配 .js、.css、哈希文件）必须放在 location / 之前
location / 中使用 try_files $uri $uri/ /index.html; 实现 SPA 回退，确保 /user/profile 这类路径由前端接管
若配置错序，/static/app.a1b2c3.js 可能被 fallback，绕过强缓存，导致性能下降甚至 404