通过nginx配置expires头部可实现静态资源长效缓存，需配合文件哈希与版本化避免失效；css、js、字体、图片等稳定资源设1年缓存并添加immutable标识，html除外；正则匹配须精准，构建工具需自动更新引用路径；验证需确认响应头及缓存状态码。
通过Nginx配置Expires头部，可以让浏览器对静态资源（如CSS、JS、图片）进行长效缓存，减少重复请求，提升页面加载速度和服务器负载效率。关键在于合理设置过期时间，并配合版本化或哈希文件名避免缓存失效问题。
明确哪些资源适合长效缓存
通常以下类型资源内容稳定、更新频率低，适合设置较长的缓存有效期：
- CSS、JavaScript 文件（尤其是带版本号或内容哈希的）
- 字体文件（.woff2、.ttf 等）
- 图片资源（.png、.jpg、.gif、.webp）
- 图标文件（.ico、.svg）
注意：HTML 文件一般不设长缓存，应保持短时效或禁用缓存，确保用户能及时获取最新页面结构。
在Nginx中配置Expires头部
在 server 或 location 块中使用 expires 指令即可。常用写法示例：
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
说明：
-
expires 1y表示设置 Expires 头为当前时间 + 1 年，同时自动设置Cache-Control: max-age=31536000 -
add_header Cache-Control "public, immutable"中的immutable告诉浏览器该资源不会变更，即使用户刷新也不需重新验证（Chrome、Firefox 支持） - 正则匹配要足够精确，避免误伤 HTML 或 API 接口路径
避免缓存更新失效：资源指纹必须跟上
如果只加缓存但不改文件名，用户可能长期卡在旧版本。必须配合构建工具实现资源“内容哈希”：
- Webpack/Vite/Rollup 默认支持
[contenthash]，生成类似main.a1b2c3d4.js的文件名 - Nginx 不需要为每个哈希文件单独配置，通配符匹配即可生效
- HTML 中引用的资源路径需由构建流程自动更新，确保新 HTML 指向新文件名
这样，哪怕缓存长达1年，只要文件名一变，浏览器就视为全新资源，自然跳过旧缓存。
验证与调试缓存是否生效
部署后务必检查响应头是否正确：
- 打开浏览器开发者工具 → Network 标签 → 刷新页面 → 查看静态资源的响应头
- 确认存在
Expires和Cache-Control字段，且值符合预期 - 二次访问时，状态码应为
200 (from disk cache)或304 Not Modified（若启用了 ETag/Last-Modified 验证）
也可用 curl 快速验证：curl -I https://your-site.com/static/app.bee5f2a7.js
不复杂但容易忽略：缓存策略有效性的前提是资源可预测、可标识。把哈希、路径、Nginx规则三者对齐，长效缓存才能真正稳定可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
