霸气!Nginx 中缓存静态文件秘籍

网站设置Js、css等文件的过期时间,是提升网站速度的基本技巧方法之一,之前写过如何在IIS设置网页内容过期时间一文,满足了部分网友的需要,最近有网友在群里提到,他们使用的是Nginx服务器,但还不知如何设置Js、css文件过期时间,故写下此教程,以便查看。

导读 这篇教程说明你应该怎样配置 nginx、设置 HTTP 头部过期时间,用 Cache-Control 中的 max-age 标记为静态文件(比如图片、 CSS 和 Javascript 文件)设置一个时间,这样用户的浏览器就会缓存这些文件。这样能节省带宽,并且在访问你的网站时会显得更快些(如果用户第二次访问你的网站,将会使用浏览器缓存中的静态文件)。

Nginx设置Js、Css等静态文件的缓存过期时间

Nginx如何设置Js、css等文件的过期时间

1、准备事项

location ~.*.(js|css|html|png|jpg)$
{
expires 3d;
}

澳门新浦京8455com,首先打开配置文件/etc/nginx/nginx.conf,然后找到下面这句话:

我想你需要一个正常工作的 nginx 软件,可以查看另一篇的帖子:在 Ubuntu
16.04 LTS 上安装 Nginx,PHP 7 和 MySQL 5.7
(LEMP)。

expires 3d;  //表示缓存3天

location~ .*.(gif|jpg|png|htm|html|css|js|flv|ico|swf)(.*) {expires
30d;}

2 配置 nginx

expires 3h;  //表示缓存3小时

设置expires这个参数即可,30d表示30天,注意后面有个分号“;”。

可以参考 expires 指令手册来设置 HTTP 头部过期时间,这个标记可以放在
“http {}”、”server {}”、”location {}” 等语句块或者 “location {}”
语句块中的条件语句中。一般会在 “location” 语句块中用 “expires”
指令控制你的静态文件,就像下面一样:

expires max;  //表示缓存10年

如果过期时间为小时,则用“h”,如“expires
1h;”表示文件缓存在1小时后过期。看看下面的范例:

location ~*  .(jpg|jpeg|png|gif|ico|css|js)$ {
   expires 365d;
}

expires -1;  //表示永远过期。

#图片缓存30天location ~.*.(jpg|png|jpeg)${expires 30d;}#js
css缓存一小时location ~.*.(js|css)?${expires 1h;}

在上面的例子中,所有后缀名是 .jpg、 .jpeg、 .png、 .gif、 .ico、 .css 和
.js 的文件会在浏览器访问该文件之后的 365 天后过期。因此你要确保 location
{} 语句块仅仅包含能被浏览器缓存的静态文件。

如果设置为-1在js、css等静态文件在没有修改的情况下返回的是http
304,如果修改返回http 200

语法解释

然后重启 nginx 进程:

http
304:自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。

nginx作为web服务器,有时需要让浏览器缓存(Browser Caching)
是为了加速浏览并节约网络资源,浏览器在用户磁盘上对最近请求过的文档进行存储。nginx通过expires指令来设置浏览器的Header

/etc/init.d/nginx reload

http 200:服务器已成功处理了请求,这表示服务器提供了请求的内容。

语法: expires [time|epoch|max|off]默认值: expires off作用域: http,
server, location

你可以在
“expires” 指令中使用以下的时间设置:

============================================================
如果不想让代理或浏览器缓存,加no-cache参数
add_header Cache-Control no-cache;
这样浏览器F5刷新时,返回的就是http 200,而不是http 304

使用本指令可以控制HTTP应答中的“Expires”和“Cache-Control”的头标,(起到控制页面缓存的作用)。

  • ●”off” 让 “Expires” 和 “Cache-Control” 头部不能被更改。
  • ●”epoch” 将”Expires” 头部设置成 1970 年 1 月 1 日 00:00:01。
  • ●”max” 设置 “Expires” 头部为 2037 年 12 月 31 日 23:59:59,设置”
    Cache-Control “的最大存活时间为 10 年
  • ●没有” @
    “前缀的时间意味着这是一个与浏览器访问时间有关的过期时间。可以指定一个负值的时间,就会把”
    Cache-Control “头部设置成” no-cache”。例如:”expires 10d” 或者”
    expires 14w3d”。
  • ●有” @ “前缀的时间指定在一天中的某个时间过期,格式是 Hh 或者Hh:Mm,H
    的范围是 0 到 24,M 的范围是 0 到 59,例如:”expires @15:34″。

可以在time值中使用正数或负数。“Expires”头标的值将通过当前系统时间加上您设定的
time 值来获得。

你可以用以下的时间单位:

epoch 指定“Expires”的值为 1 January, 1970, 00:00:01 GMT。

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

max 指定“Expires”的值为 31 December 2037 23:59:59
GMT,“Cache-Control”的值为10年。

例如:”1h30m” 表示一小时三十分钟,”1y6M” 表示一年六个月。

-1 指定“Expires”的值为服务器当前时间;-1s,表示永远过期,即不缓存文件。

注意,要是你用一个在将来很久才会过期的头部,当组件修改时你就要改变组件的文件名。因此给文件指定版本是一个不错的方法。例如,如果你有个
javascript.js 文件
并且你要修改它,你可以在修改的文件名字后面添加一个版本号。这样浏览器就要下载这个文件,如果你没有更改文件名,浏览器将从缓存里面加载(旧的)文件。

如何检测网页过期设置是否生效?

除了把基于浏览器访问时间设置” Expires” 头部(比如 “expires
10d”)之外,也可以通过在时间前面的” modified “关键字,将 “Expires”
头部的基准设为文件修改的时间(请注意这仅仅对存储在硬盘的实际文件有效)。

打开webkaka的网站速度诊断工具(在线测试工具网址如下图),输入你的网页地址,检测后,立即可以看到设置是否生效了。

expires modified 10d;

检测网页缓存是否生效

3 测试

上图看到,被检测网页的js、css文件过期时间为1天。

要测试你的配置是否有效,可以用火狐浏览器的开发者工具中的网络分析功能,然后用火狐访问一个静态文件(比如一张图片)。在输出的头部信息里,应该能看到
Expires 头部和有 max-age 标记的 Cache-Control 头部(max-age
标记包含了一个以秒为单位的值,比如 31536000 就是指今后的一年)
澳门新浦京8455com 1

4 链接

nginx 的 Http 头部模块(HttpHeadersModule):”

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图