当前位置：首页 > news >正文

前端静态资源接入 CDN 后如何配置缓存过期时间？

news 2026/5/13 20:33:11

对于带哈希值的静态文件（如 js、css、图片），建议设置最长缓存时间；对于 HTML 入口文件，建议不缓存或短时间缓存，确保用户能获取最新版本。

先说结论：静态资源缓存配置的核心在于区分“内容可变”与“内容不可变”的文件，配合文件名哈希策略使用。

快速处理思路

CDN 服务商众多，控制台界面各异，但配置逻辑一致。若需紧急调整，优先在 CDN 控制台配置缓存规则；若需长期稳定，建议在源站（如 Nginx）配置好响应头，让 CDN 回源时直接继承。

源站 Nginx 配置参考：

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {\n    expires 1y;\n    add_header Cache-Control "public, immutable";\n}

注意：HTML 文件通常不建议套用上述规则，应单独配置为不缓存。

浏览器和 CDN 节点都会缓存资源。如果配置不当，用户可能一直加载旧版本的 js 或 css，导致页面功能异常或样式错乱；如果缓存时间过短，则无法减轻服务器压力，失去接入 CDN 的意义。

HTTP 协议通过响应头控制缓存行为，主要字段包括：

对于内容永不变更的文件（如带哈希值的 bundle.js），可以告诉浏览器“永远不要重新请求”；对于入口文件（如 index.html），必须告诉浏览器“每次都要检查更新”。

1. 确认文件命名策略

检查构建输出。如果文件名包含哈希值（如 app.3f8a9b.js），说明内容变更时文件名会变，这类文件适合长缓存。如果文件名固定（如 logo.png），内容变了文件名不变，这类文件只能短缓存。

2. 配置源站响应头

在 Web 服务器（Nginx/Apache）上配置不同文件类型的 header。带哈希的静态资源设置 max-age 为一年（31536000 秒），并加上 immutable 标记，告知浏览器内容不可变。

3. 配置 CDN 缓存规则

4. 特殊文件单独处理

如果有固定的 robots.txt 或 favicon.ico，建议设置较短的缓存时间（如 1 天），以便必要时能快速更新。

1. 命令行检查

使用 curl 命令查看响应头，确认 Cache-Control 和 Expires 是否符合预期：

curl -I https://your-domain.com/static/app.3f8a9b.js

观察输出中是否包含 Cache-Control: public, max-age=31536000, immutable 类似字段。

2. 浏览器开发者工具

打开 Chrome 开发者工具，切换到 Network 面板，刷新页面。点击资源文件，查看 Response Headers。如果状态码是 200 (from cache) 或 304，且 size 显示为 memory cache 或 disk cache，说明缓存生效。

HTML 被强缓存：最严重的问题。如果 index.html 被缓存，用户即使清除了 js 缓存，也加载不到新的 js 引用链接。务必确保 HTML 文件的缓存时间为 0 或 no-cache。
查询参数被忽略：部分 CDN 默认忽略 URL 中的查询参数（如 app.js?v=1）。如果靠 v 参数做版本控制，需在 CDN 控制台开启“保留参数缓存”或关闭忽略参数选项。
缓存清除成本：设置了长缓存后，若发现资源有 bug，需要主动刷新 CDN 缓存。部分服务商对刷新操作有频次限制或费用，配置前需了解规则。
跨域资源缓存：如果静态资源部署在不同域名下，确保 CORS 配置正确，否则缓存可能因跨域策略失效。