网站加载慢静态文件请求多开启Nginx缓存让你的网站快3倍原文https://mp.weixin.qq.com/s/gi1zZok8-kR8Qv5-JcxYQA一、静态资源缓存的作用静态资源缓存分为两个层级每一层都有明确的价值缓存层级作用原理命中表现客户端缓存expires控制浏览器缓存策略减少重复请求浏览器加载本地缓存不发HTTP请求服务端缓存proxy_cacheNginx作为代理缓存后端响应减少回源返回X-Cache: HIT直接返回缓存核心价值减少请求次数浏览器加载过缓存的静态文件不再发起请求降低服务器压力后端服务器接收的请求减少负载降低加速资源加载客户端缓存直接从本地读取响应时间接近0节省带宽成本流量减少尤其对CDN场景节省明显二、使用场景分析按资源类型资源类型是否缓存推荐缓存时间说明Logo/图标✅ 是30天-1年几乎不更新CSS/JS带版本号✅ 是1年文件名带hash更新后自动全新加载CSS/JS无版本号✅ 是7天需定期重新检查图片jpg/png/gif✅ 是30天通常不变HTML文件❌ 否不缓存/短时间核心入口需实时生效API接口⚠️ 短期1-10分钟平衡性能与数据实时性按业务场景电商详情页 → proxy_cache expires商品信息可能频繁变动 API接口 → proxy_cache 5-10分钟实时性要求高 后台管理系统 → expires 7天内部系统更新频率可控 CDN分发 → 双层缓存客户端30天 服务端7天三、编译Nginx所需模块缓存类型模块名称是否默认包含说明expires客户端缓存内置模块✅ 是控制浏览器缓存头proxy_cache服务端缓存--with-http_proxy_cache_module✅ 是反向代理缓存功能清除缓存ngx_cache_purge❌ 需编译手动清理指定URL缓存查看当前模块# 查看proxy_cache模块是否已编译 nginx -V 21 | grep -o http_proxy_cache_module # 查看所有已编译模块 nginx -V四、配置方案详解方案一expires客户端缓存浏览器缓存原理在HTTP响应头中添加Cache-Control和Expires告诉浏览器可以缓存多久。http { include /etc/nginx/mime.types; default_type application/octet-stream; # CSS/JS文件带版本号可设长 location ~* \.(css|js|woff|woff2|svg|ttf|eot)$ { expires 30d; add_header Cache-Control public, no-transform; } # 图片资源 location ~* \.(jpg|jpeg|png|gif|ico|webp|bmp|tiff)$ { expires 30d; add_header Cache-Control public, no-transform; } # 视频资源 location ~* \.(mp4|avi|mov|wmv|flv|mkv)$ { expires 15d; add_header Cache-Control public, no-transform; } # 禁止缓存HTML确保用户看到最新内容 location ~* \.(html|htm)$ { expires -1; add_header Cache-Control no-cache, no-store; } }方案二proxy_cache服务端缓存原理Nginx将后端响应缓存在本地磁盘相同请求直接返回缓存减少回源。http { # 定义缓存区域 proxy_cache_path /var/cache/nginx levels1:2 keys_zonemy_cache:100m inactive24h max_size10g use_temp_pathoff; } upstream backend { server 192.168.1.10:8080; } server { listen 80; server_name www.site.com; location / { proxy_pass http://backend; proxy_cache my_cache; proxy_cache_valid 200 302 10m; proxy_cache_valid 404 1m; proxy_cache_key $host$request_uri; # 后端出错时返回缓存提升可用性 proxy_cache_use_stale error timeout invalid_header updating; # 缓存锁避免惊群同一时刻多个请求同时回源 proxy_cache_lock on; # 添加响应头显示缓存状态 add_header X-Cache $upstream_cache_status; } }缓存参数说明levels1:2两级目录单目录最多64000个文件性能最优keys_zonemy_cache:100m100MB内存存放缓存键索引inactive24h24小时未访问自动清理max_size10g磁盘缓存最大10GB超出自动LRU淘汰方案三双层缓存推荐生产使用http { proxy_cache_path /var/cache/nginx levels1:2 keys_zonemy_cache:100m inactive24h max_size10g; } server { listen 443 ssl http2; server_name www.site.com; # 静态资源 location ~* \.(css|js|jpg|png|gif|ico|svg|woff2)$ { # 服务端缓存 proxy_pass http://backend; proxy_cache my_cache; proxy_cache_valid 200 30d; # 客户端缓存 expires 30d; add_header Cache-Control public, no-transform; add_header X-Cache $upstream_cache_status; } # API接口短缓存 location /api { proxy_pass http://backend; proxy_cache my_cache; proxy_cache_valid 200 302 5m; expires 5m; } }五、启用前准备创建缓存目录# 创建缓存目录 sudo mkdir -p /var/cache/nginx # 赋予权限nginx用户 sudo chown -R nginx:nginx /var/cache/nginx sudo chmod 700 /var/cache/nginx # 设置目录属主防止其他用户写入 sudo setfacl -m g:nginx:rwx /var/cache/nginx检查nginx.conf加载路径# 确认主配置文件中引用了conf.d目录 cat /etc/nginx/nginx.conf | grep conf.d六、验证缓存是否生效浏览器端验证# 打开Chrome F12 → Network选项卡刷新页面 # 查找静态资源查看Response Headers 200 (from disk cache) # 浏览器缓存命中 Cache-Control: public, max-age2592000服务端缓存验证# 查看X-Cache头 curl -I http://www.site.com/static/logo.png # 命中缓存 HTTP/1.1 200 OK Cache-Control: public, max-age2592000 X-Cache: HIT # 未命中 X-Cache: MISS # 已过期 X-Cache: EXPIRED七、常见问题排查问题原因解决方案图片无法缓存响应头缺少Cache-Control添加add_header Cache-ControlHTML被缓存没有单独设置no-cache添加location ~* \.(html)$ { expires -1; }缓存目录写入失败权限不对或目录不存在mkdir chmod chown缓存空间满max_size太小或inactive太长调小inactive时间惊群导致回源同一时刻大量请求开启proxy_cache_lock on八、优化建议清单静态资源带版本号如assets/main.abc123.js缓存时间设长HTML文件单独配置不缓存确保用户始终看到最新版proxy_cache_lock on 避免惊群效应X-Cache状态监控及时发现问题缓存目录权限设置合理防止安全风险生产环境使用双层缓存策略