单页应用（SPA）应通过Nginx的expires指令配合内容哈希实现精准缓存：HTML不缓存，带哈希的JS/CSS/图片等设1年缓存并加immutable，无哈希资源如favicon设1天缓存。
单页应用（SPA）首次加载体积大，但其中大量静态资源（如 JS、CSS、图片、字体）其实长期不变。合理配置 expires 指令，能让浏览器缓存这些文件，避免重复请求，显著提升后续访问速度和服务器负载表现。
expires 的作用与原理
expires 是 Nginx 的 HTTP 头部控制指令，用于向浏览器发送 Expires 和 Cache-Control 响应头。它告诉浏览器：这个资源在指定时间内无需再次请求，直接从本地缓存读取即可。
对 SPA 来说，关键在于区分“不变”与“可能变”的资源：
- 带哈希指纹的文件（如
main.a1b2c3.js）可长期缓存（1年） - 无哈希的通用资源（如
favicon.ico、robots.txt）可设较短有效期（1天） - HTML 文件通常不缓存（或仅缓存极短时间），确保能及时获取新版本
典型配置示例（按文件类型精准控制）
在 server 或 location 块中添加如下配置：
# HTML 不缓存（强制每次检查）
location ~* \.html$ {
expires -1;
add_header Cache-Control "no-cache, no-store, must-revalidate";
}
<h1>JS/CSS/图片等带哈希的静态资源缓存 1 年</h1><p>location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}</p><h1>针对无哈希的静态资源（如 favicon.ico），缓存时间稍短</h1><p>location = /favicon.ico {
expires 1d;
add_header Cache-Control "public";
}</p>
注意：immutable 是重要补充，它告诉浏览器：该资源在缓存有效期内绝不会变更，跳过条件 GET 请求（如 If-None-Match），进一步减少协商开销。
配合构建工具实现缓存友好
expires 发挥最大效果的前提是前端构建输出带内容哈希的文件名。例如：
- Webpack/Vite/Rollup 默认支持
[contenthash]，生成index.b8f2a123.css - 确保 HTML 中引用的 JS/CSS 路径也动态更新（由构建工具自动注入）
- 避免手动写死无哈希路径，否则缓存失效后用户无法获取新版
若未启用哈希，强行设置长缓存会导致用户长期卡在旧版本，必须配合版本号或查询参数（如 app.js?v=2.3.0），但不如哈希可靠。
验证与调试技巧
部署后用浏览器开发者工具的 Network 面板确认效果：
- 查看响应头是否含
Expires和Cache-Control - 刷新页面时，JS/CSS 状态码应为
200 (from disk cache)或304（若未加immutable） - 修改文件内容并重新构建后，新哈希文件会触发全新请求，旧文件仍可被缓存
也可用 curl -I 快速检查：
curl -I https://your-site.com/static/main.abc123.js
不复杂但容易忽略：缓存策略不是越长越好，而是要和资源更新机制对齐。用好 expires + 内容哈希，SPA 的二次访问体验会有质的提升。
