菜单

至于Web静态财富缓存自动更新的盘算与执行

2019年4月11日 - JavaScript

打赏援助本人写出更加多好小说,谢谢!

任选1种支付方式

图片 1
图片 2

1 赞 4 收藏
评论

愈来愈多请参考=>here

什么消除?

透过前文的牵线,大家明白了足以选取文件的指印值来标识需求客户端主动创新的文书,可是怎么实现吗?经过协调的沉思和调查研商后,大约思路为:

  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为例),在历次公布的时候要求依据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>
<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"/>

后记

关于前端品质优化,缓存平素是浓墨重彩的一笔。要是运用好缓存控制,不仅能拉长用户体验,减弱服务端流量压力,而且对于前端工程化的推动也是很有帮带的。随着web系统的事体和作用的恢弘,维护前端的职务将变得更其繁重,遵照历史规律,当1件事变得愈加繁重的时候,工程化是其唯一的出路。现在的前端还很年轻,工程化的概念建议来不久,但自笔者深信不疑,在各大网络集团的前端们主动推进下,前端工程化必将成为产业界标配。

打赏扶助本人写出越来越多好文章,感谢!


打赏小编

在springmvc的配置文件中增进:

静态能源公布的痛点

小编们知道,缓存对于前端品质的优化是11分主要的,在规范公布类别的时候,对于这些不日常转移的静态能源比如各样JS工具库、CSS文件、背景图片等等大家会设置三个比较大的缓存过期日子(max-age),当用户再度访问那几个页面的时候就足以直接行使缓存而不是再一次从服务器获取,那样不光可以减轻服务端的压力,仍可以够节省网络传输的流量,同时用户体验也越来越好(用户打开页面越来越快了)。那样看起来很完善,你好作者好我们都好,but,理想是光明的,现实是暴虐的,倘若存在这么二个浏览器,强制缓存静态能源还不给您拨冗缓存的火候(微信,说的就是你!),该如何是好?就算你的服务端已履新,文件的Etag值已成形,然而微信正是不给你更新文件…请允许自身做八个伤感的表情…

对此那一个题材,大家很当然的想法是在每一回公布新本子的时候给持有静态财富的恳求前边加上一个版本参数或时刻戳,类似于/js/indx.js?ver=1.0.1,可是这么存在多个难题:

  1. 微信对于加参数的静态资源仍遗闻先采用缓存版本(实际测试的情状是如此的)。
  2. 壹经那样是卓有功效的,那么对于未有变动的静态能源也会重复从服务器获取而不是读取缓存,未有足够利用缓存。

那么有未有1种办法能够自动辨识出哪位文件发出了变化并让客户端主动立异呢?答案是迟早的。大家清楚四个文件的MD5能够唯一标识三个文书。若文件发出了转移,文件的指纹值MD5也随着转移。利用这几个特点大家就足以标识出哪些静态财富发生了变更,并让客户端主动革新。

有关Web静态能源缓存自动更新的思念与执行

2016/04/06 · 基本功技术 ·
静态财富

本文作者: 伯乐在线
Natumsol
。未经作者许可,禁止转发!
迎接参加伯乐在线 专栏撰稿人

前言

对于前端工程化而言,静态能源的缓存与立异一向是1个比较大的难题,各大专营商也推出了个别的消除方案,如百度的FIS工具集。要是未有化解好那些难点,不仅会给用户造成不佳的用户体验,而且还会给支付和调节带了成百上千不须求的劳碌。关于如何自动实现缓存更新,以下是上下一心的有些感受和认知。

至于我:Natumsol

图片 3

Alibaba 前端工程师
个人主页
·
作者的稿子
·
5
·
   

图片 4

测试

为了印证可行性,自个儿做了个demo,代码托管在Github。经测试,可以圆满的缓解此前建议的题材。

  1. 第一次载入页面
    图片 5
  2. 更改index.js, 刷新页面
    图片 6

我们发现,唯有index.js在改变后被主动革新了,别的的静态财富均是直接使用的缓存!。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图