Nginx静态资源缓存配置，提升网站访问速度

时间：2026-10-7 07:27 作者：emer 分类： 无

前言

网站访问慢？很大一部分原因是静态资源（图片、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;
    }
}

缓存时间说明

文件类型	建议缓存时间	说明
图片（jpg/png/gif）	30天	图片一般不怎么改
CSS/JS	7天	改了文件版本号就能更新
HTML	不缓存	保证用户看到最新页面
字体文件	30天	基本不变

更精细的配置

# 图片缓存 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";
}

参数说明

参数	作用
`expires 30d`	缓存30天
`expires 1h`	缓存1小时
`expires -1`	不缓存
`Cache-Control public`	允许所有缓存（浏览器、CDN）
`Cache-Control private`	只允许浏览器缓存
`Cache-Control no-cache`	不缓存（每次都要验证）
`Cache-Control no-store`	完全不缓存
`immutable`	文件永远不变（不用问服务器了）

怎么验证缓存生效了

打开浏览器 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

总结

步骤	操作
图片缓存	`expires 30d`
CSS/JS 缓存	`expires 7d`
HTML 不缓存	`expires -1`
改了文件怎么更新	加版本号或改文件名
验证生效	F12 看 Response Headers

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

遇到问题加QQ23979811 协助处理

标签: Nginx 静态资源缓存浏览器缓存网站加速 Cache-Control