如何设置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天规则。

在浏览器中打开目的页面,按F12查看 Network > Headers信息。验证静态缓存设置生效” class=”wp-image-27693″></figure>
</article>

            <div class=
文章最后更新时间:2024-06-16 19:03:15某些文章具有时效性,若有错误或已失效,请在下方 留言或联系 Ferry资源网
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容