nginx图片、css、js缓存(简单)

最新推荐文章于 2025-04-19 08:00:00 发布
原创 最新推荐文章于 2025-04-19 08:00:00 发布 · 8.4k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#nginx

本文详细介绍了Nginx中不同资源类型的缓存配置方法，包括通用静态资源、图片、JS和CSS文件等，通过具体配置示例帮助读者理解如何有效设置缓存时间以提高网站性能。
  1. #根目录
  2. location ^~ /console/ {   
  3.     root /console;   
  4.     expires  30d;
  5. }

  7. #静态资料目录
  8. location ~* \.(gif|jpg|jpeg|bmp|png|ico|txt|js|css)$
  9. {   
  10.     root /dist;   
  11.     expires  30d;
  12. }

  14. #图片缓存时间设置  
  15. location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$  
  16. {  
  17. expires 8d;  
  18. }  
  19. #JS和CSS缓存时间设置  
  20. location ~ .*.(js|css)?$  
  21. {  
  22. expires 2h;  
  23. }  
zhangjunli
关注
如何在 Nginx 中实现 JavaScript 和 CSS 的缓存控制
PixelCoder的博客
09-29 1018
在 Web 开发中，经常需要对 JavaScript 和 CSS 文件进行缓存控制，以确保客户端能够及时获取到最新的文件内容，同时提高网站的性能。请注意，以上配置只是禁用了浏览器对 JavaScript 和 CSS 文件的缓存，但并不会阻止 Nginx 自身进行缓存。通过以上配置，你可以在 Nginx 中实现 JavaScript 和 CSS 文件的缓存控制。头为 “no-cache, no-store, must-revalidate”，我们告诉浏览器不要缓存这些文件，并在每次请求时都向服务器发送请求。
正确使用 nginx expires缓存css
zhaoyangjian724的专栏
04-18 347
Expires 我们先回过头在看之前的两种缓存协商办法，浏览器给Web服务器发送HTTP请求来询问是否可以使用缓存。如果Web服务器告诉浏览器使用缓存， 那么浏览器就直接使用缓存呈现给用户，你是否发现，这个询问的HTTP请求是不是也占用了Web服务器的资源，即便不产生任何的数据传输，用户还是需要等待这个请求发送到响应完毕。那么能不能不发送HTTP请求呢？比如第一次浏览器请求完毕后，Web服务器...
nginx配置实践笔记＜三＞
CEVERY的博客
11-16 216
一、修改上传资源限制，默认1M server { listen 80; server_name infostationback.xueersipy.com www.infostationback.xueersipy.com; access_log on; autoindex on; # 设置访问地址以目录方式显示 client_max_body_size 30M;
nginx 图片缓存
weixin_34407348的博客
05-20 784
最近准备用nginx搭建了一个图片服务器，看中的就是nginx超强的静态文件处理能力。由于图片量比较大，和web服务器（也是nginx）分开运行，虽然web服务器调用图片没用问题，但毕竟是远程调用，肯定没有本地文件系统那么快，因此仍然有优化的空间。使用前的nginx配置location ~* ^.+\.(js|ico|gif|jpg|jpeg|png|html|htm)$ { log_no...
Nginx 下缓存静态文件（如css js)
热门推荐
akon_vm的专栏
01-11 4万+
目的：缓存nginx服务器的静态文件。如css,js,htm,html,jpg,gif,png,flv,swf，这些文件都不是经常更新。便于缓存以减轻服务器的压力。 实现： nginxproxy_cache可以将用户的请缓存到本地一个目录，当下一个请求时可以直接调取缓存文件，就不用去后端服务器去取文件了。 配置： 打开配置文件/etc/nginx/nginx.conf user  www
优化 Nginx 配置以实现 JavaScript 和 CSS 的不缓存
2301_79330511的博客
10-04 959
然而，由于浏览器的缓存机制，当我们更新 JavaScript 或 CSS 文件时，浏览器可能会继续使用旧的缓存文件，导致用户无法看到最新的更改。现在，当用户访问你的网站时，Nginx 将发送适当的响应标头，告诉浏览器不要缓存 JavaScript 和 CSS 文件。请注意，上述配置是基于简单的 Nginx 配置，实际的配置可能因服务器环境和需求而有所不同。通过上述配置，你可以确保用户在访问你的网站时，始终获取最新的 JavaScript 和 CSS 文件，从而提供更好的用户体验。块，具体取决于你的配置。
后端面试必备：Nginx中静态文件缓存配置详解
最新发布
qq_58299462的博客
04-19 1345
在现代Web应用中，静态文件（如图片、CSS、JavaScript等）通常占据了大部分带宽。合理配置静态文件缓存可以显著提高网站性能，减少服务器负载，改善用户体验。
如何在nginx中配置缓存静态文件
01-20
这篇教程说明你应该怎样配置 nginx、设置 HTTP 头部过期时间，用 Cache-Control 中的 max-age 标记为静态文件（比如图片、 CSS 和 Javascript 文件）设置一个时间，这样用户的浏览器就会缓存这些文件。这样能节省...
Nginx实战：浏览器缓存
weixin_44569326的博客
06-01 822
2 对于js，图片，css，字体等，设置max-age=2592000. 也就是30天;比如，对常见格式的图片、Flash文件在浏览器本地缓存30天，对。式的文件很少会被修改，则可以通过expires设置浏览器缓存。浏览器缓存是为了加速浏览，浏览器在用户磁盘上，对最近请求过。本地磁盘显示文档，这样，就可以加速页面的阅览，缓存的方式节。比如对于提交的订单，为了防止浏览器回退重新提交，可以使用。的是服务器，进而判断订单的状态给出相应的提示信息！约了网络的资源，提高了网络的效率。
nginx实现对css，js文件缓存
fengcy的博客
09-07 5861
因此，如果存在合适的验证令牌 (ETag)，no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。其中max-ages=2592000的意思是，缓存保存2592000秒，也就是30天（参见下表），30天后回重新向服务器请求资源，并重新保存缓存文件。我们在nginx实现对静态文件的缓存可以使我们服务在访问这些文件时，不需要请求服务器响应，直接访问缓存文件，达到提速的效果。红色标注的是需要修改的地方，蓝色标注的可以不需要，修改之后重启nginx。首先我们先看一下，没设置之前的效果。
nginx优化——图片缓存
seven的博客
05-25 1184
nginx.conf配置文件增加以下内容。首次访问，可以看到图片是正常请求的。上传一张图片到nginx服务上。再次请求就是请求缓存中的图片。
nginx图片、css、js缓存
资料...
11-06 815
#图片缓存时间设置 location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ { expires 8d; } #JS和CSS缓存时间设置 location ~ .*.(js|css)?$ { expires 2h; }
霸气！Nginx 中缓存静态文件秘籍
weixin_34064653的博客
09-03 313
导读 这篇教程说明你应该怎样配置 nginx、设置 HTTP 头部过期时间，用 Cache-Control 中的 max-age 标记为静态文件（比如图片、 CSS 和 Javascript 文件）设置一个时间，这样用户的浏览器就会缓存这些文件。这样能节省带宽，并且在访问你的网站时会显得更快些（如果用户第二次访问你的网站，将会使用浏览器缓存中的静态文件）。 1、准备事项...
nginx开启图片、css、js缓存
weixin_55560445的博客
06-19 4133
描述： 在网站程序调试的时候，经常会遇到浏览器的缓存问题导致修改过的前端代码无效果。每次通过浏览器强制刷新后才能清掉缓存。这时如果禁用掉nginx缓存，可以减少一些小麻烦，让浏览器每次到服务器去请求文件，而不是在浏览器中读取缓存文件。 当程序调试好上线后，可以开启nginx缓存，节省服务器的带宽流量，减少一些请求，降低服务器的压力。通过配置nginx的配置文件/usr/loca...
linux nginx 缓存服务器,linux nginx 图片缓存服务器
weixin_36150766的博客
05-02 276
弹性云服务器 ECS弹性云服务器(Elastic Cloud Server)是一种可随时自助获取、可弹性伸缩的云服务器，帮助用户打造可靠、安全、灵活、高效的应用环境，确保服务持久稳定运行，提升运维效率三年低至5折，多种配置可选了解详情弹性云服务器弹性云服务器(Elastic Cloud Server)是一种可随时自助获取、可弹性伸缩的云服务器，帮助用户打造可靠、安全、灵活、高效的应用环境，确保服务...
关于Nginx缓存
一枚小白的分享，不喜勿喷~
10-24 1666
一般情况下系统用到的缓存有三种ETagNginx使用的缓存属于代理缓存。
Nginx 图片 js文件缓存配置方法
11-18 2324
对于网站中像图片js,css都可能长年不更新了这样我们可以把它缓存起来从而减少相关请求了，下面我们一起来看利用proxy_cache将用户的请求缓存到本地一个目录中，这样就达到我们的目地了。 我们下面来把gif|jpg|jpeg|png|bmp|swf给缓存起来，配置如下 打开nginx.conf配置文件在http层级加入以下代码  代码如下 复制代码
nginx实战2---浏览器设置缓存
weixin_34133829的博客
10-15 266
对常见格式的图片文件等在浏览器本地缓存，对于css,js等文件在浏览器本地缓存. 语法：expires [time|epoch|max|off 默认值：off expires指令控制HTTP应答中的“Expires”和“Cache-Control”Header头部信息，启动控制页面缓存的作用 time参数---》time:可以使用正数或负数 “Expires”头标的值将通过当前系统时间加...
nginx 不缓存js，html，css
05-26
默认情况下，Nginx 不会缓存静态文件（如 js、html、css 等），因为这些文件一般不会频繁地更改，而且缓存这些文件可能会占用服务器的存储空间。但是，你可以通过配置 Nginx 来启用缓存，以提高网站性能和加载速度。 要在 Nginx 中启用缓存，你可以在 Nginx 配置文件中添加以下指令： ``` location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 1d; add_header Cache-Control "public, max-age=86400"; access_log off; } ``` 这个配置告诉 Nginx 缓存所有指定类型的文件，并设置这些文件的过期时间为 1 天。同时，它还添加了一个 Cache-Control 头，以告诉浏览器缓存这些文件，并设置最大缓存时间为 1 天。最后，它关闭了访问日志，以避免记录缓存请求。 需要注意的是，启用缓存可能会导致网站更新不及时，因此你需要根据自己网站的需求和特点来决定是否启用缓存。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值