关于Web静态资源缓存自动更新的思考与实践
分类:计算机知识

至于Web静态能源缓存自动更新的斟酌与执行

2016/04/06 · 底蕴技艺 · 静态财富

本文我: 伯乐在线 - Natumsol 。未经小编许可,禁绝转发!
招待插手伯乐在线 专栏编辑者。

前言

对以前端工程化来讲,静态能源的缓存与立异一贯是叁个相当大的题目,各大商铺也推出了个别的解决方案,如百度的FIS工具集。若无缓慢解决好那几个难点,不仅仅会给顾客变成不好的客商体验,并且还恐怕会给支付和调解带了过多不必要的麻烦。关于如何自动实现缓存更新,以下是友好的一些心得和心得。

静态财富揭橥的痛点

大家通晓,缓存对于前端质量的优化是不行珍视的,在正规表露种类的时候,对于那三个不平时转移的静态能源譬喻种种JS工具库、CSS文件、背景图片等等我们会设置叁个超大的缓存过期日子(max-age卡塔尔,当顾客再次访问这一个页面包车型大巴时候就能够平昔动用缓存并非重新从服务器获取,那样不但能够缓和服务端的压力,仍为能够省去互联网传输的流量,同不经常候顾客体验也更好(客户展开页面更加快了卡塔 尔(阿拉伯语:قطر‎。那样看起来很圆满,你好自己好我们都好,but,理想是美好的,现实是冷酷的,就算存在此么三个浏览器,强制缓存静态财富还不给你灭亡缓存的火候(Wechat,说的便是你!卡塔 尔(阿拉伯语:قطر‎,该如何做?就算你的服务端已履新,文件的Etag值已生成,不过Wechat正是不给您更新文件…请允许自身做三个哀伤的神气…

对此这么些主题材料,我们很当然的主张是在历次揭橥新本子的时候给持有静态能源的央求后边加上叁个版本参数或时间戳,肖似于/js/indx.js?ver=1.0.1,不过这么存在多个难题:

  1. Wechat对于加参数的静态财富依好玩的事先利用缓存版本(实际测量检验的图景是如此的卡塔 尔(英语:State of Qatar)。
  2. 借使这样是实用的,那么对于从未修改的静态财富也会重新从服务器获取并不是读取缓存,未有足够利用缓存。

那么有未有豆蔻梢头种方式能够自行辨识出哪位文件发出了退换并让客商端主动修改呢?答案是迟早的。大家清楚叁个文件的MD5能够唯风度翩翩标记多个文件。若文件发出了变化,文件的指纹值MD5也随后转移。利用那脾脾气我们就能够标志出哪位静态财富发生了变动,并让客商端主动立异。

怎么样解决?

透过前文的介绍,大家掌握了足以采取文件的指印值来标记要求顾客端主动改过的文书,不过什么促成呢?经过和煦的动脑筋和应用研究后,大致思路为:

  1. 在历次公布早先,利用Gulp对具备的静态能源开展预管理,重命名叫原文件名 + 文件MD5值 + 文件后缀名的形式。比如index.js重命名叫index-c6c9492ce6.js
  2. 变化后生可畏份manifest,标记了预处理前后文件之间的应和关系.manifest文件的样品为:
JavaScript

{ "index.js": "index-c6c9492ce6.js", "lib/jQuery/jQuery.js":
"lib/jQuery/jQuery-683c73084c.js", "require.js":
"require-c8e8015f8d.js", "style.css": "style-125d3a3f82.css",
"tools.js": "tools-5666ee48e9.js" }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4b6669294327058473-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b6669294327058473-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f4b6669294327058473-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b6669294327058473-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f4b6669294327058473-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b6669294327058473-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f4b6669294327058473-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4b6669294327058473-1" class="crayon-line">
{
</div>
<div id="crayon-5b8f4b6669294327058473-2" class="crayon-line crayon-striped-line">
  &quot;index.js&quot;: &quot;index-c6c9492ce6.js&quot;,
</div>
<div id="crayon-5b8f4b6669294327058473-3" class="crayon-line">
  &quot;lib/jQuery/jQuery.js&quot;: &quot;lib/jQuery/jQuery-683c73084c.js&quot;,
</div>
<div id="crayon-5b8f4b6669294327058473-4" class="crayon-line crayon-striped-line">
  &quot;require.js&quot;: &quot;require-c8e8015f8d.js&quot;,
</div>
<div id="crayon-5b8f4b6669294327058473-5" class="crayon-line">
  &quot;style.css&quot;: &quot;style-125d3a3f82.css&quot;,
</div>
<div id="crayon-5b8f4b6669294327058473-6" class="crayon-line crayon-striped-line">
  &quot;tools.js&quot;: &quot;tools-5666ee48e9.js&quot;
</div>
<div id="crayon-5b8f4b6669294327058473-7" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 在渲染视图模版的时候,遵照manifest,将预管理前的静态资置换为预管理后的静态能源。
  2. 假设在浏览器端用到了模块加载器(这里以促成了AMD标准的requireJS为例卡塔 尔(英语:State of Qatar),在每趟发表的时候供给依照manifest对模块进行mapping,将配备文件以内联JS的花样写入到模版页面里面,相仿于:
JavaScript

&lt;script&gt; requirejs.config({ "baseUrl": "/js", "map": { "*": {
"index": "index-c6c9492ce6", "jquery":
"lib/jQuery/jQuery-683c73084c", "require": "require-c8e8015f8d",
"tools": "tools-5666ee48e9" } } }); &lt;/script&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-13">
13
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4b666929d715705975-1" class="crayon-line">
&lt;script&gt;
</div>
<div id="crayon-5b8f4b666929d715705975-2" class="crayon-line crayon-striped-line">
requirejs.config({
</div>
<div id="crayon-5b8f4b666929d715705975-3" class="crayon-line">
    &quot;baseUrl&quot;: &quot;/js&quot;,
</div>
<div id="crayon-5b8f4b666929d715705975-4" class="crayon-line crayon-striped-line">
    &quot;map&quot;: {
</div>
<div id="crayon-5b8f4b666929d715705975-5" class="crayon-line">
        &quot;*&quot;: {
</div>
<div id="crayon-5b8f4b666929d715705975-6" class="crayon-line crayon-striped-line">
            &quot;index&quot;: &quot;index-c6c9492ce6&quot;,
</div>
<div id="crayon-5b8f4b666929d715705975-7" class="crayon-line">
            &quot;jquery&quot;: &quot;lib/jQuery/jQuery-683c73084c&quot;,
</div>
<div id="crayon-5b8f4b666929d715705975-8" class="crayon-line crayon-striped-line">
            &quot;require&quot;: &quot;require-c8e8015f8d&quot;,
</div>
<div id="crayon-5b8f4b666929d715705975-9" class="crayon-line">
            &quot;tools&quot;: &quot;tools-5666ee48e9&quot;
</div>
<div id="crayon-5b8f4b666929d715705975-10" class="crayon-line crayon-striped-line">
        }
</div>
<div id="crayon-5b8f4b666929d715705975-11" class="crayon-line">
    }
</div>
<div id="crayon-5b8f4b666929d715705975-12" class="crayon-line crayon-striped-line">
});
</div>
<div id="crayon-5b8f4b666929d715705975-13" class="crayon-line">
&lt;/script&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

测试

为了验证可行性,本人做了个demo,代码托管在Github。经测量检验,能够圆满的缓慢解决早前建议的主题素材。

  1. 第四回载入页面
    图片 1
  2. 更改index.js, 刷新页面
    图片 2

咱们开掘,唯有index.js在改换后被主动校订了,别的的静态财富均是直接使用的缓存!。

后记

关于前端品质优化,缓存一向是浓墨重彩的一笔。若是利用好缓存调控,不只可以增高客户体验,减少服务端流量压力,何况对于前端工程化的推动也是很有援救的。随着web系统的事情和机能的恢弘,维护前端的职务将变得愈加艰巨,依据历史规律,当意气风发件事变得进一层劳累的时候,工程化是其唯风流倜傥的出路。今后的前端还很年轻,工程化的概念提议来不久,但本身深信不疑,在各大互连网公司的前端们积极推动下,前端工程化一定会将成为产业界标配。

打赏扶植本人写出更多好小说,谢谢!

打赏小编

打赏帮衬小编写出越来越多好文章,多谢!

任选后生可畏种支付办法

图片 3 图片 4

1 赞 4 收藏 评论

关于我:Natumsol

图片 5

Alibaba 前端程序员 个人主页 · 小编的文章 · 5 ·    

图片 6

本文由六和开奖现场发布于计算机知识,转载请注明出处:关于Web静态资源缓存自动更新的思考与实践

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文