介绍

nginx 静态文件缓存配置指的是：

nginx 告诉浏览器服务端的静态文件你客户端浏览器拿到了，下次访问的时候就不要再发送请求了，直接从本地缓存加载。

这样一来可以加快网站的打开速度，节省服务器的带宽。

原理是服务端返回的Cache-Control 头中的max-age的时间。例如：

nginx 静态文件缓存配置

缓存的时间是2592000秒那就是30天，下面给出配置示例

配置示例

server {

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

        # js，css文件缓存24小时
        location ~* .*\.(js|css)?$ {
                expires  24h;
        }

}

配置了缓存，当第二次再次访问的效果：

nginx 静态文件缓存配置

返回的状态码是304，标准解释是：Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

意思是客户端请求服务器端，服务端没有返回图片，而是告诉客户端你只需要从你的缓存中取出就可以了。

上面的例子中指令 expires，它表示过期时间，时间单位可以为:

  • ms: 毫秒
  • s: 秒
  • m: 分钟
  • h: 小时
  • d: 天
  • w: 星期
  • M: 月 (30 天)
  • y: 年 (365 天)

对于js和css样式文件如果有更新的情况下如何是好呢？

1. 给它们加一个版本号 如  <link rel="stylesheet" href="/static/default/css/style.css?v=2023041311">，当有样式更新的时候就修改版本号即可。

2. 直接修改样式文件名:<link rel="stylesheet" href="/static/default/css/style2023041311.css">，目前来说在前端项目打包的时候每次生成的名字都是不一样的。

2592000