当用户上报一个线上的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

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

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

Nginx针对前端静态资源的缓存处理的更多相关文章

  1. nginx静态资源设置缓存的方法

    nginx静态资源设置缓存的方法 直接加expires 30d; 就是就可以了 缓存时间30天完整如下 <pre> location / { root /home/www/wordpres ...

  2. Nginx实现静态资源的缓存

    1.1   需求 1.对静态文件进行缓存:html,js,css,png,gif,jpg,jpeg,bmp,swf. 2.对符合url规则的请求进行缓存. 3.针对某个url进行清除缓存. 1.1   ...

  3. 前端静态资源版本更新与缓存之——gulp自动化添加版本号

    公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1 ...

  4. nginx静态资源浏览器缓存

    1.缓存介绍 作用:提升用户体验,减少服务器压力 浏览器无缓存:浏览器发起请求->无缓存->请求WEB服务器->web服务器检查是否有更新(没有更新返回304)->呈现 浏览器 ...

  5. gulp之静态资源防缓存处理

    最近,因为校友网项目开始有些规模了.开始就要考虑对静态资源进行工程自动化的管理.一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS.这三个都有各自的特点,大家可以依据自己的 ...

  6. Http静态资源的缓存

    最近一段时间一直在研究页面缓存和压缩方面的东西,由于公司服务器使用的是iis6.0,很多性能方面的优化都不支持.所以,就开始尝试着自己写个简单的处理程序. 为了减少服务器带宽的需求,我们要减少客户端与 ...

  7. windows安装nginx并存放静态资源

    1.将nginx-windows.zip下载下来,然后点击nginx.exe 如果一闪而过并且打开网页输入localhost显示无法访问,打开error.log文件:No mapping for th ...

  8. nginx 配置处理静态资源

    前言:在一些中大型的网站中,都会专门配置一个处理静态资源的服务,下面我们来用NGINX实战配置下 配置静态资源的目的是为了加速静态资源的访问速度 比较简单,下面直接上配置了 以上就是文章内容的全部了

  9. 开发掉坑(二)前端静态资源 Uncaught SyntaxError: Unexpected token <

    某天,有同学反馈后台管理系统出现静态资源无法加载的问题. 复现如下: 进入首页. 点击侧边栏某个子功能,静态资源可正常访问到. 等待10分钟左右,点击侧边栏其他子功能,无法访问到静态资源. 查看控制台 ...

随机推荐

  1. CSS盒子模型中的Padding属性

    CSS padding 属性 CSS padding 属性定义元素边框与元素内容之间的空白区域,不可见.如果想调整盒子的大小可以调整内容区,内边距,边框. CSS padding 属性定义元素的内边距 ...

  2. mysql NOT NULL约束 语法

    mysql NOT NULL约束 语法 作用:约束强制列不接受 NULL 值. 东莞大理石平台 说明:NOT NULL 约束强制字段始终包含值.这意味着,如果不向字段添加值,就无法插入新记录或者更新记 ...

  3. asp.net 5 如何使用ioc 以及在如何获取httpcontext对象

    一切尽在大叔的博客中: http://www.cnblogs.com/TomXu/p/4496440.html

  4. [JSOI2008]最大数 题解

    前言 巨佬说:要有线段树,于是蒟蒻就开始打线段树. 蒟蒻只能拿之前0分的板子题开刀了QAQ. 题解 一开始我以为插入操作不带取模,于是打了下面这个弱智玩意 下面的代码是会WA的 #include &l ...

  5. Android CPU使用率:top和dump cpuinfo的不同

    CPU是系统非常重要的资源,在Android中,查看CPU使用情况,可以使用top命令和dump cpuinfo.我记得很久以前,就发现这两者存在不同,初步猜测应该是算法上存在差异.最近需要采集应用C ...

  6. oracle 如何更改密码的hash

    如何迁移oracle user的密码到新的环境,一下列出了方法: select name,spare4||';'||password pwd from sys.user$ where name = ' ...

  7. Flask中的路由配置

    在Flask中也同样有django中的路由配置只不过没有djngo那么严格主要的参数有一下六个记住常用的就可以了 1.endpoint   反向生成url地址标志,默认视图函数名 2.methods ...

  8. Week 5 - 529.Minesweeper

    529.Minesweeper Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char ma ...

  9. HslControls

    HslControls控件库的使用demo,HslControls是一个工业物联网的控件库,基于C#开发,配套HslCommunication组件可以实现工业上位机软件的快速开发,支持常用的工业图形化 ...

  10. SpringBoot整合Lintener

    1.通过扫描完成Lintener组件的注册 1.1编写Listener /** * springboot整合Lintener 方式一 * 在web.xml中如何配置Listener * <lis ...