当前位置:首页>WordPress专区>WordPress教程>最新Nginx与Apache设置静态资源缓存

最新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生效。

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

<IfModule mod_expires.c>
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
</IfModule>

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

<IfModule mod_expires.c>
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
</IfModule>

保存,重新启动Apache生效。

验证缓存设置是否生效

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

最新Nginx与Apache设置静态资源缓存
浏览器中查看Headers信息

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

免责声明 1:本站的课程与素材,都是电子版课件,非实物光盘,课件由百度网盘发送.(百度网盘下载教程)2:本站所有涉及视频及素材,软件等由互联网搜索收集而来,本站不拥有此类资料的版权。3:本站所有视频,素材及软件不加密、不限时、可永久观看或使用!禁止二次销售,否则因此引起的一切问题与本站无关。4:本站所有的资源均为免费提供,提供资料的目的是让大家学习和交流,所收取的相关费用非资料销售费用,而是资料收集整理手工费。5:无意侵害您的权益,请发送邮件至 590173@qq.com 或点击左侧 私信:站长反馈,我们将尽快处理。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

最新W3 Total Cache 中文版最佳配置教程2023版

2023-8-6 13:31:00

WordPress教程网站教程

WordPress Redis 配置指南:Object Cache Pro 插件详解

2024-1-10 0:10:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索