文档章节

Nginx针对前端静态资源的缓存处理

o
 osc_zoa3moe9
发布于 2019/12/07 16:26
字数 870
阅读 17
收藏 0

精选30+云产品,助力企业轻松上云!>>>

  当用户上报一个线上的bug后,开发者修改前端代码的bug上新后,用户反映问题依旧存在的问题...这种情况是不是曾经遇到过,这个问题跟浏览器的缓存机制有很大关系(强制缓存和协商缓存,这里我就不介绍具体的缓存机制了,网上资料一搜一大把,并且讲的很详细),这里我来说下我们是如何解决这个问题的。。。

  最简单粗暴的办法就是禁止强制缓存,我们本地开发的时候经常打开chrome这个功能,启用方法如下,这样我们每次刷新页面都是最新的代码,浏览器不会缓存任何静态资源(不知道这么说是不是真的合理...)

  

  当然这种方法是不使用于生产环境的情况:用户每次打开页面都请求所有的资源(假设我们每次不会改所有文件),那每次打开太慢了,这你受的了吗?(陈震腔)。我们在生产环境是强制缓存和协商缓存并用的,其实大部分资源走协商缓存,只有少数文件禁止强制缓存(其中就包括*.html文件)。

  我们知道浏览器请求资源是根据url来判定的,如果url变了,就会使本地缓存失效,向服务器请求新的资源,我们现在在使用的前端框架大部分使用webpack构建项目,而webpack中的loader提供针对css和js文件添加hash值得方法,这样我们在发布新版本后,就会使浏览器缓存失效,从而用户能获取新的资源...但是index.html文件就悲催了(我没见过有对html文件添加hash值的...),针对html文件的缓存的策略一般是禁止强制缓存,每次请求都向服务器请求最新的资源(听说大厂spa基本都是这样,我看掘金网这样的...)。然而针对html强制不缓存有两种方法:

  第一种方法就是在html文件中添加meta标签,告诉浏览器强制不缓存此文件。这种方法有一个致命问题就是添加的meta只有浏览器认识,如果中间环节恰好有缓存服务器,缓存服务器是会缓存的....,其他的问题就应该浏览器的兼容性问题,毕竟这html5的新标签。

<meta http-equiv=Cache-Control content="no-cache, no-store, must-revalidate">
<meta http-equiv=Pragma content=no-cache>
<meta http-equiv=Expires content=0>

  第二种方法就是在nginx服务器location配置不缓存html类型的文件。

  其实以上方法就可以开头我们提到的问题了...在最后我贴一个nginx针对一个特定文件的强制不缓存策略配置,我们在项目中遇到了,我们使用了一个dyConfig.js,这个文件暂时没想到版本控制加hash办法,这个文件是独立于代码的。。。

  

location / {
            root   html;
            index  index.html index.htm;
       if ($request_filename ~* .*dyConfig\.js$) { add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate"; } }

  最后,提醒下大家,在location中使用if指令要多加小心,if这个指令是有坑的,nginx官方wiki有介绍:If Is Evil

  参考资料:如何解决静态资源的缓存问题

       浏览器缓存看这一篇就够了

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Nginx的介绍

1、什么是NGINX:   Nginx是一个开源的,支持高性能的、支持高并发的web服务软件和代理服务软件,它是由俄罗斯人lgor Sysoev开发的   Nginx具有高并发(特别是对于静态资源)占用系统资源少...

osc_7v8xw84w
2018/03/20
1
0
利用nginx设置浏览器协商缓存

强缓存与协商缓存的区别   强缓存:浏览器不与服务端协商直接取浏览器缓存   协商缓存:浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源 协商缓存运作原理...

osc_6oe4sgbd
2019/06/21
12
0
WEB服务器 - Apache、Nnginx、Lighttpd的比较和择优(转)

Apache服务器和nginx的优缺点: 我们之前大量使用Apache来作为HTTPServer。 Apache具有很优秀的性能,而且通过模块可以提供各种丰富的功能。 优点: 首先Apache对客户端的响应是支持并发的 ...

残夜
2012/05/21
0
0
通过Nginx架设灵活的网站静态化方案

最近在做一个网站项目,功能基本已经完成,目前主要的难点在于性能的调优上,其实网站第一期已经上线,目前正在进行第二期的改版中,而性能也归为第二期的 重点。 第一期的主要任务是功能的实...

鉴客
2010/06/11
5.8K
2
工作日志,跨域和缓存的冲突问题

记录和分享一篇工作中遇到的奇难杂症。一个前后端分离的项目,前端件图片上传到服务器上,存在跨域的问题。后端将图片返回给前端,并希望前端能对图片进行缓存。这是一个很常见的跨越和缓存的...

osc_jwwyedri
2055/12/22
8
0

没有更多内容

加载失败,请刷新页面

加载更多

如何获取NuGet以安装/更新packages.config中的所有软件包?

问题: I have a solution with multiple projects in it. 我有一个包含多个项目的解决方案。 Most of the third party references are missing, yet there are packages.config file for e......

fyin1314
23分钟前
17
0
Xcode中的版本与版本 - Version vs build in Xcode

问题: I have an app that I developed with Xcode 3 and recently started editing with Xcode 4. In the target summary I have the iOS application target form with fields: identifie......

javail
53分钟前
14
0
如何在Python中将字典键作为列表返回? - How to return dictionary keys as a list in Python?

问题: In Python 2.7 , I could get dictionary keys , values , or items as a list: 在Python 2.7中 ,我可以将字典键 , 值或项作为列表获取: >>> newdict = {1:0, 2:0, 3:0}>>> newd......

技术盛宴
今天
17
0
2020世界人工智能大会开幕首日 百度与浦发银行达成战略合作

本文作者:y****n 7月9日,2020世界人工智能大会开幕首日,百度与浦发银行签署战略合作协议,将在人工智能、金融科技等多个领域进一步深化合作。双方将优势互补,实现人工智能技术在金融领域...

百度开发者中心
昨天
26
0
Java中C ++ Pair 的等价物是什么? - What is the equivalent of the C++ Pair in Java?

问题: Is there a good reason why there is no Pair<L,R> in Java? 有没有一个很好的理由说明Java中没有Pair<L,R> ? What would be the equivalent of this C++ construct? 这个C ++构造的......

富含淀粉
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部