Nginx静态缓存配置

引言

CSS、JS、图片、字体这类不变的静态资源，每次都回源取一遍浪费带宽和时间。用Nginx给静态资源加浏览器缓存响应头，让浏览器本地留存，第二次访问直接读本地，首屏和重复访问速度明显提升。

配置示例

在server或location块中：

location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff2?)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
    access_log off;
}

参数说明

• expires 30d：设置缓存30天，浏览器本地留存；
• Cache-Control public：允许中间缓存（CDN、代理）；
• immutable：文件内容不变，缓存期内不再发条件请求；
• access_log off：静态资源不记访问日志，减少IO。

带版本号更新

静态文件内容更新后，旧缓存会导致用户看到老文件。常用办法是文件名带哈希或版本，如app.[hash].js，内容一变文件名就变，浏览器当成新文件重新下载：

# 配合构建工具输出的带hash文件名，缓存可拉长到一年
expires 1y;

动态文件不要长缓存

HTML页面、接口响应要短缓存或不缓存，避免用户看到过期页面：

location / {
    add_header Cache-Control "no-cache";
}

验证方法

浏览器F12网络面板看响应头：Cache-Control、Expires，再看状态码，二次访问200 from disk/memory cache即生效。

注意事项

• 缓存过期时间按资源稳定性设置，图片长、HTML短；
• 更新静态资源靠改文件名版本号，而不是缩短缓存；
• 不要给动态接口、登录页面加public长缓存；
• 改配置后nginx -t检查再reload。

总结

Nginx静态缓存用expires加Cache-Control给css/js/图片设置本地缓存，稳定资源配合版本号长缓存，动态页面不缓存。浏览器F12验证响应头，平衡访问速度与内容新鲜度。

前言

每次访问网站都要重新下载图片、CSS、JS？太浪费了！配置Nginx静态资源缓存，让浏览器本地缓存这些文件，下次访问直接从本地读，速度快好几倍。

一、什么是浏览器缓存

浏览器访问网站后，把图片、CSS、JS等静态文件存在本地。下次再访问，直接从本地读，不用再从服务器下载。

好处：

• 加载更快
• 省带宽
• 减轻服务器压力

二、配置静态资源缓存

打开Nginx配置文件，在server段加：

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

参数解释

不同文件缓存时间

# 图片缓存30天
location ~* \.(png|jpg|jpeg|gif|ico|svg)$ {
    expires 30d;
}

# CSS/JS缓存7天
location ~* \.(css|js)$ {
    expires 7d;
}

# HTML不缓存（保证更新及时）
location ~* \.html$ {
    expires -1;
}

三、验证配置

nginx -t

重载Nginx：

nginx -s reload

四、验证是否生效

方法1：curl测试

curl -I https://www.0454.wang/static/logo.png

看到响应头有：

Cache-Control: max-age=2592000
Expires: ...

就是生效了。

方法2：浏览器F12

按F12 → Network → 点图片请求 → 看Response Headers：

Cache-Control: max-age=2592000

五、缓存更新策略

问题： 缓存了30天，但我更新了图片怎么办？

方法1：文件名加版本号

<img src="/logo.png?v=20240101">

浏览器看到文件名变了，就会重新下载。

方法2：文件名加hash

<img src="/logo.abc123.png">

构建工具自动加hash，内容变了hash就变。

六、常见坑

坑1：HTML也被缓存了

问题： 更新了网站内容，但用户看到的还是旧的。

解决： HTML不缓存

location ~* \.html$ {
    expires -1;
}

坑2：缓存时间太长

问题： 图片更新了，用户30天都看不到新的。

解决： 用版本号或hash。

坑3：CDN缓存了旧文件

问题： Nginx配置了，但CDN没刷新。

解决： 去CDN后台刷新缓存。

坑4：没加expires就没缓存

问题： 配置了但不生效。

检查： 看location有没有匹配到。

七、完整配置示例

server {
    listen 80;
    server_name www.0454.wang;
    root /var/www/html;

    # HTML不缓存
    location ~* \.html$ {
        expires -1;
    }

    # 图片缓存30天
    location ~* \.(png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public";
    }

    # CSS/JS缓存7天
    location ~* \.(css|js)$ {
        expires 7d;
        add_header Cache-Control "public";
    }
}

八、缓存时间怎么设

九、怎么清除缓存

浏览器端

• 强制刷新：Ctrl + F5
• 清除浏览器缓存

服务器端

• 更新文件名版本号
• 重载Nginx

总结

记住：

1. 静态资源加缓存，提升速度
2. 图片缓存30天
3. CSS/JS缓存7天
4. HTML不缓存
5. 更新了就改文件名版本号
6. 用curl验证是否生效

最常用配置：

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 30d;
    add_header Cache-Control "public";
}

遇到问题加QQ23979811 协助处理

前言

网站访问慢？很大一部分原因是静态资源（图片、CSS、JS）每次都要重新从服务器下载。配置浏览器缓存之后，用户第二次访问就直接从本地缓存读了，速度快很多。本文讲一下 Nginx 怎么配置静态资源缓存。

缓存原理

浏览器第一次访问网站，服务器返回静态资源的时候，加上 Cache-Control 头，告诉浏览器"这个文件你缓存多久"。

第二次访问的时候，浏览器发现本地有缓存，且还没过期，就直接用本地的，不用再请求服务器了。

配置方法

按文件类型设置缓存时间

在 Nginx 配置里加：

server {
    listen       443 ssl http2;
    server_name  www.example.com;

    root  /var/www/html;
    index index.html;

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|swf|woff|woff2|ttf|eot)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }

    # HTML 文件不缓存
    location ~* \.html$ {
        expires -1;
    }
}

缓存时间说明

更精细的配置

# 图片缓存 30 天
location ~* \.(jpg|jpeg|png|gif|ico)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

# CSS JS 缓存 7 天
location ~* \.(css|js)$ {
    expires 7d;
    add_header Cache-Control "public";
}

# 字体文件缓存 30 天
location ~* \.(woff|woff2|ttf|eot)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

# HTML 不缓存
location ~* \.html$ {
    expires -1;
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}

参数说明

怎么验证缓存生效了

打开浏览器 F12 → Network → 点一个静态资源 → 看 Response Headers：

Cache-Control: max-age=2592000
Expires: xxx

有这两个头就说明缓存生效了。

常见坑

坑1：改了 CSS 但页面没更新

更新了 CSS 文件，但用户看到的还是老版本。

原因： 浏览器缓存了老 CSS。

解决：

• 改文件名：style.css → style.v2.css
• 或者加版本号：style.css?v=20261007

这样浏览器就会当成新文件重新下载。

坑2：HTML 也被缓存了

页面内容更新了，但用户看到的还是老页面。

原因： HTML 文件也被缓存了。

解决： HTML 文件设置不缓存：

location ~* \.html$ {
    expires -1;
}

坑3：缓存时间太长

设置了一年缓存，万一文件要改怎么办？

解决： 用文件指纹（版本号）的方式，比如：

• app.3a7b2c.js
• style.8d9e1f.css

文件内容变了，文件名就变了，缓存自然就失效了。

坑4：配置了缓存但不生效

加了 expires 但浏览器还是每次都请求。

原因1： 开发模式下浏览器禁用了缓存。

解决： F12 → Network → 把 "Disable cache" 的勾去掉。

原因2： Nginx 没重载。

解决：

nginx -t
nginx -s reload

总结

提醒： 缓存配置好之后，网站打开速度能快好几倍，特别是图片多的网站。

遇到问题加QQ23979811 协助处理