Js资源增量更新--seajs本地存储增量更新插件(storeinc)使用

Js资源增量更新--seajs本地存储增量更新插件(storeinc)使用 storeinc 是一个用来实现js代码本地存储化，并可以在js版本更新的时候，对js内容做增量更新的seajs插件。对于一个js文件来说，当js版本没有更新的时候，storeinc会从本地存储(localstorage)里读取js并解释执行，而当需要修改js内容时,storeinc则会只拉取新更新的js内容跟本地内容合并成新的js内容，更新的内容通过使用与storeinc配套的构建工具spm-storeinc-build来离线生成。另外storeinc还提供了一个java servlet来实现实时生成增量更新内容，如果使用了这个servlet则无需使用spm-storeinc-build来构建，只需要按这个servlet配置即可。 Storeinc的增量更新的原理跟rsync有点像，算是一个rsync的js版了，不同的是rsync的增量更新单位用二进制来计算，storeinc则是字符为单位，具体的实现原理请看:<a href="https://github.com/luyongfugx/hcliuLoad/blob/master/hcliuLoad.ppt">https://github.com/luyongfugx/hcliuLoad/blob/master/hcliuLoad.ppt</a> 下面我们来看下这个插件的使用过程： Storeinc使用seajs的examples来作为一个例子(这个例子也是storeinc里给出的一个实际例子),到https://github.com/luyongfugx/storeinc/tree/master/把里面的demo目录下载到自己的web服务器。 打开sea-moudles/seajs/seajs/2.1.1/目录，我们发现里面有个plugin-storeinc.js，这正是storeinc seajs插件本身. 打开app目录下的hello.html,里面已经嵌入了storeinc插件: <script src="../sea-modules/seajs/seajs/2.1.1/plugin-storeinc.js"></script> 再看下面的代码: <script>   // Set configuration   var version='1.0.6' //这里是版本，使用storeinc就要遵循它的规范   seajs.config({     base: "../sea-modules/",     alias: {       "jquery": "jquery/jquery/1.10.1/jquery.js"     }   }); //使用use来启用storeinc插件   seajs.use('plugin-storeinc', function(store) { /storeinc插件设置 //store 表示启用本地存储 //inc 表示启用增量更新插件 //jsver 表示版本 //aliasver 表示定义了别名的js的版本，这个跟其他脚本做了区分，不走增量更新 //debug 表示是不是在调试状态，如果是则不走本地存储和增量更新   store.configStroreInc({'store':true,'inc':true,'jsver':version,'aliasver':'1.10.2','debug':false});   // For development   if (location.href.indexOf("?dev") > 0) {     seajs.use("../static/hello/src/main");   }   // For production   else {     seajs.use("examples/hello/"+version+"/main");   } }); </script> 接下来安装构建工具spm-storeinc-build npm install spm-storeinc-build -g 然后到static/hello目录下修改package.json为如下 {   "family": "examples",   "name": "hello",   "lastversion":"1.0.5", //上个版本号（如果是第一次可以不写）   "version": "1.0.6",//本次版本号   "chunkSize":12,//增量更新块大小，填12即可,也可以填其他   "spm": {     "alias": {       "jquery": "jquery"     },     "output": ["main.js", "style.css"]   } } 然后在该目录下运行spm-storeinc-build 构建工具下会在dist目录下生成混淆后的js文件.如下图所示: <a href="http://static.oschina.net/uploads/img/201310/14175525_M6ZI.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="wps_clip_image-9936" border="0" alt="wps_clip_image-9936" src="http://static.oschina.net/uploads/img/201310/14175526_Zp4s.png" width="244" height="105" /></a> 然后我们将1.0.6文件夹放到,sea-modules\examples\hello文件夹下（js资源从这个目录拉取） 启动web服务器，在浏览器输入<a href="http://localhost/spm/app/hello.html">http://localhost/spm/app/hello.html</a> ,访问正常，看一下网络请求，由于是第一次访问所以，看到js访问了main-1.0.6.js这个文件 <a href="http://static.oschina.net/uploads/img/201310/14175526_udV8.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="wps_clip_image-3269" border="0" alt="wps_clip_image-3269" src="http://static.oschina.net/uploads/img/201310/14175527_Dl9a.png" width="244" height="114" /></a> 另外看一下localstorage，已经把这个文件内容和版本号存入了本地存储 <a href="http://static.oschina.net/uploads/img/201310/14175527_pcvu.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="wps_clip_image-27616" border="0" alt="wps_clip_image-27616" src="http://static.oschina.net/uploads/img/201310/14175527_o7wy.png" width="244" height="71" /></a> 再刷新一次，已经不会有main-1.0.6.js这个请求，但是功能ok，说明程序是从本地存储读取js内容的,较少了网络请求，加快了速度并减少了流量 接下来看下增量更新,我们分别修改static\hello\src目录下的main.js和spinning.js 在main.js和spinning.js里面修改几个console.log的日志输出修改原来的1.0.6为1.0.7 <a href="http://static.oschina.net/uploads/img/201310/14175528_l3Oh.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="wps_clip_image-10960" border="0" alt="wps_clip_image-10960" src="http://static.oschina.net/uploads/img/201310/14175528_9I8V.png" width="244" height="116" /></a> <a href="http://static.oschina.net/uploads/img/201310/14175529_l1Jg.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="wps_clip_image-27561" border="0" alt="wps_clip_image-27561" src="http://static.oschina.net/uploads/img/201310/14175529_qhLL.png" width="244" height="113" /></a> 然后修改package.json,把版本修改为1.0.7,把上个版本修改为1.0.6如下图所示: <a href="http://static.oschina.net/uploads/img/201310/14175530_1vhR.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="wps_clip_image-14544" border="0" alt="wps_clip_image-14544" src="http://static.oschina.net/uploads/img/201310/14175530_wrnW.png" width="244" height="174" /></a> 然后执行spm-storeinc-build 命令进行构建，这时候发现在dist目录下生成了一个1.0.7目录，如下： <a href="http://static.oschina.net/uploads/img/201310/14175531_71HI.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="wps_clip_image-18487" border="0" alt="wps_clip_image-18487" src="http://static.oschina.net/uploads/img/201310/14175531_JNvg.png" width="244" height="108" /></a> 发现多了一个main-1.0.6_1.0.7.js的js文件这个文件就是传说中的增量文件了，就是说这个文件的内容是main.js从1.0.6变化到1.0.7所修改的内容，我们打开文件可以看到如下内容： <a href="http://static.oschina.net/uploads/img/201310/14175532_A1bX.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="wps_clip_image-921" border="0" alt="wps_clip_image-921" src="http://static.oschina.net/uploads/img/201310/14175532_LKuB.png" width="244" height="43" /></a> 发现这里只有刚才修改的js的更新内容,然后我们将1.0.7文件夹放到,sea-modules\examples\hello文件夹下,并修改\app\hello.html把版本改为1.0.7,然后重新访问 <a href="http://localhost/spm/app/hello.html">http://localhost/spm/app/hello.html</a> ,这时候发现浏览器访问的是main-1.0.6_1.0.7.js这个增量文件： <a href="http://static.oschina.net/uploads/img/201310/14175533_VyPW.png"><img style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="wps_clip_image-27167" border="0" alt="wps_clip_image-27167" src="http://static.oschina.net/uploads/img/201310/14175533_7rjC.png" width="244" height="117" /></a> 整个页面功能也都ok,在看看console平台，发现我们刚才的修改已经生效，console打出了1.0.7版本的相关信息: <a href="http://static.oschina.net/uploads/img/201310/14175534_MEHD.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="wps_clip_image-11320" border="0" alt="wps_clip_image-11320" src="http://static.oschina.net/uploads/img/201310/14175535_HJ1U.png" width="244" height="93" /></a> 说明增量更新已经生效，浏览器以最小的流量损耗是想了一次js版本更新，以这个demon为例，如果走普通的版本更新方式，需要全两下载main.js，需要下载一个2k的文件，而走增量更新则只需要下载0.5k左右的文件，流量大大节省！！

来源：oschina

链接：https://my.oschina.net/u/13535/blog/168738

标签

seajs

NodeJS

localstorage