静态资源缓存与更新,gulp管理静态资源缓存

关于Web静态资源缓存自动更新的合计与执行

2016/04/06 · 静态资源缓存与更新,gulp管理静态资源缓存。基本功技术 ·
静态资源

本文作者: 伯乐在线 –
Natumsol
。未经小编许可,禁止转发!
欢迎参加伯乐在线 专辑小编。

前言

对此前端工程化而言,静态资源的缓存与更新一贯是一个相比较大的标题,各大商店也生产了分别的缓解方案,如百度的FIS工具集。假设没有缓解好这一个标题,不仅会给用户造成不佳的用户体验,而且还会给开发和调剂带了众多不须求的劳动。关于什么自动完结缓存更新,以下是友善的一些体会和体会。

在springmvc的布置文件中加上:

大商家的静态资源优化方案,基本上要促成如此多少个东西:

前者项目在本子迭代的时候,难免会遭受静态缓存的难题,明明开发的是ok的,可是一安插到服务器上,发现页面变得乌烟瘴气,那是出于静态缓存引起的。

静态资源宣布的痛点

大家通晓,缓存对于前端质量的优化是可怜第一的,在标准揭橥系统的时候,对于那个不平常转移的静态资源比如各个JS工具库、CSS文件、背景图片等等大家会安装一个相比大的缓存过期光阴(max-age),当用户再次走访那一个页面的时候就足以平素动用缓存而不是再次从服务器获取,那样不但能够减轻服务端的压力,还足以节约网络传输的流量,同时用户体验也更好(用户打开页面更快了)。那样看起来很完美,你好自家好大家都好,but,理想是光明的,现实是阴毒的,如若存在这么一个浏览器,强制缓存静态资源还不给你化解缓存的火候(微信,说的就是您!),该咋做?固然你的服务端已更新,文件的Etag值已成形,然而微信就是不给你更新文件…请允许我做一个伤感的表情…

对此那么些题材,大家很当然的想法是在每趟公布新本子的时候给持有静态资源的请求前边加上一个版本参数或时刻戳,类似于/js/indx.js?ver=1.0.1,不过这样存在八个问题:

  1. 微信对于加参数的静态资源仍然事先利用缓存版本(实际测试的图景是那样的)。
  2. 假诺那样是行得通的,那么对于尚未改动的静态资源也会再一次从服务器获取而不是读取缓存,没有充裕利用缓存。

那么有没有一种办法可以自行辨识出哪些文件发出了变通并让客户端主动立异呢?答案是自然的。咱们通晓一个文本的MD5可以唯一标识一个文书。若文件发出了转变,文件的指纹值MD5也随后转移。利用那一个特点我们就足以标识出哪些静态资源暴发了转移,并让客户端主动立异。

<mvc:resources location="/js/" mapping="/js/**" cache-period="300"/>
<mvc:resources location="/imgage/" mapping="/imgage/**" cache-period="300"/>
<mvc:resources location="/css/" mapping="/css/**" cache-period="300"/>
<mvc:resources location="/resourse/" mapping="/resourse/**" cache-period="300"/>

       配置超长期的本土缓存 —— 节省带宽,提升品质

图片 1

相关文章