如何在Nginx与Apache设置静态资源缓存教程

共计 1977 个字符，预计需要花费 5 分钟才能阅读完成。

如何在 Nginx 与 Apache 设置静态资源缓存教程? 通常网站由动态和静态两种资源构成，其动态资源一般为 PHP、ASP、ASP.net、JAVA 等程序，而静态资源一般是图片、样式文件 (CSS)、JS 代码文件等。由于静态资源在一般情况下是很少变更的，所以在 WEB 服务器中可以通过设置客户端的缓存时间来达到节省网络带宽及提高效率的目的。一般来说，图片文件、CSS 样式文件、JS 代码文件推荐设置的缓存时间可以为一年，这也是 PageSpeed Insights 推荐的。

Nginx 设置静态资源缓存的方法

Nginx 虚拟主机配置文件中的 Server 块中添加以下代码：

location ~ .*/.(gif|jpg|jpeg|png|bmp|swf|WebP)$

{

expires 365d;

error_log /dev/null;

access_log off;

}

location ~ .*/.(js|css)?$

{

expires 365d;

error_log /dev/null;

access_log off;

}

注意，以上代码需插入在 Server 块中，也就是 server{…….} 的 } 之前。

expires 365d; 的意思就是将该类型的文件缓存时间设置为 365 天，expires 的具体语法如下：

expires 60s; #缓存 60 秒

expires 10m; #缓存 10 分钟

expires 12h; #缓存 12 小时

expires 30d; #缓存 30 天

设置完成后，重启 Nginx 即生效。

Apache 设置静态资源缓存

Apache 设置缓存之前，需先开启 LoadModule expires_module modules/mod_expires.so 模块，编辑 Apache 的”httpd.conf”，找到这么一行：

#LoadModule expires_module modules/mod_expires.so

将该行前面的”#”字号删除，保存，重新启动 Apache 生效。

然后在主机配置文件中加入以下代码 (示例)：

ExpiresActive On

ExpiresDefault A86400

ExpiresByType image/x-icon A31536000

ExpiresByType application/x-javascript A31536000

ExpiresByType text/css “access plus 30 days”

ExpiresByType image/gif A31536000

ExpiresByType image/png A31536000

ExpiresByType image/jpeg A31536000

ExpiresByType text/plain A31536000

ExpiresByType application/x-shockwave-flash A31536000

ExpiresByType video/x-flv A31536000

ExpiresByType application/pdf A604800

ExpiresByType text/html A900

其中 A31536000 就是 31536000 秒，相当于一年。或者也可以写成：”access plus 365 days”，如下示例：

ExpiresActive On

ExpiresDefault A86400

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

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

ExpiresByType text/css “access plus 365 days”

ExpiresByType image/gif “access plus 365 days”

ExpiresByType image/png “access plus 365 days”

ExpiresByType image/jpeg “access plus 365 days”

ExpiresByType text/plain “access plus 365 days”

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

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

ExpiresByType application/pdf A604800

ExpiresByType text/html A900

保存，重新启动 Apache 生效。

验证缓存设置是否生效

在 Chrome 或 Edge 浏览器中，访问某.png 文件 Url(已设置缓存时间为一年)，然后按 F12 查看该文件的 Headers 信息，可以看到如下图：

浏览器中查看 Headers 信息

可以看到 cache-control 中的最大缓存时间为：31536000 秒 (一年)，这就代表设置成功了。