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

時間 2019-11-06

標籤資源增量更新 seajs 本地存儲插件 storeinc 使用欄目 JavaScript 简体版

原文原文鏈接

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左右的文件，流量大大節省！！css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。