如何设置Nginx/Apache静态资源缓存规则？

常见的动态网站一般是php、asp、jsp、asp.net等程序实现的，而其他静态资源包括：图片、css样式表、js代码等内容一般不会改动，所以我们可以在 web服务设置浏览端的文件缓存时间，来实现快速访问网站和节省网络带宽流量的效果，一举多得。

Google PageSpeed Insights推荐的图片文件、CSS样式文件、JS代码、字体文件缓存时间为一年（365d），也可以设置成 30d 或者其他时间，大家可以根据需要自行选择。

1、Nginx静态资源缓存

在 Nginx网站配置文件中添加如下代码：

location ~ .*.(gif|jpg|jpeg|png|webp|woff2|woff|bmp|swf)$
{
expires 30d;
error_log off;
access_log /dev/null;
}

location ~ .*\.(js|css)?$
{
expires 30d;
error_log off;
access_log /dev/null;
}

expires 30d; 意思是文件缓存时间 30天，expires语法举例如下：

expires 60s; #缓存60秒
expires 10m; #缓存10分钟
expires 12h; #缓存12小时
expires 365d; #缓存365天

设置完成后，必须重启Nginx才能生效。

以宝塔面板为例，默认已自动添加下图中的静态文件缓存规则，你只需根据自己网站需要进行微调即可。

也可以把其他静态文件后缀名添加进去。

2、Apache静态资源缓存

Apache要先开启 LoadModule expires_module modules/mod_expires.so模块。

编辑Apache的”httpd.conf”，找到下面这行：

#LoadModule expires_module modules/mod_expires.so

删除前面的 # 号。

保存。

在主机配置文件中加入代码：

ExpiresActive On ExpiresDefault A86400

ExpiresByType image/x-icon “access plus 30 days”

ExpiresByType application/x-javascript “access plus 30 days”

ExpiresByType text/css “access plus 30 days”

ExpiresByType image/gif “access plus 30 days”

ExpiresByType image/png “access plus 30 days”

ExpiresByType image/jpeg “access plus 30 days”

ExpiresByType text/plain “access plus 30 days”

ExpiresByType application/x-shockwave-flash “access plus 30 days”

ExpiresByType video/x-flv “access plus 30 days”

ExpiresByType application/pdf A604800 ExpiresByType text/html A900

保存并重启 Apache 让配置生效。

3、验证静态缓存设置生效

在浏览器中打开目的页面，按F12查看 Network > Headers信息。

点击图片或 js、css文件。

查看 cache-control:max-age=2592000 秒，符合上面设置的缓存30天规则。