js本地存儲和增量更新rstoreinc插件使用

時間 2019-12-07

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

原文原文鏈接

用增量更新這個算法寫了一個requirejs插件storeinc,使用方法以下: 首先使用修改後的r.js來進行混淆打包，構建配置以下(請看js/requirejs下的build.js): ({     appDir: "../demo/js",     baseUrl: "./",     dir: "../demo/dist",//不走增量更新的文件存放路徑     paths: {         log: "a",         storeinc:"../storeinc"//這裏插件     },     storeinc: true,//說明走storeinc插件     storedir: "../demo/storeincdist",//混淆後的js存放路徑，包括增量文件     lastver:"2", //上一個版本號，若是沒有說明是第一次打包     ver:'3',//新版版本號     chunkSize:12,//增量更新塊號     modules: [         {             name: "test",             exclude: [                 "log","b","c","d","storeinc"             ]         },         {             name: "log",             exclude: [                "storeinc"             ]         },         {             name: "b",             exclude: [                 "storeinc","log"             ]         },     ] }) 運行node r.js -o build.js 第一次運行時 node r.js ：     lastver:"1", //上一個版本號，若是沒有說明是第一次打包 ver:'2',//新版版本號 而後到js目錄修改各個源文件，第二次運行時：     lastver:"2", //上一個版本號，若是沒有說明是第一次打包 ver:'3',//新版版本好號 而後在index.html裏面加入以下代碼（請看js/requirejs下的index.html）: <script> //storeinc相關配置 var require = {                 ver:"3",//當前版本                 storeproxy:false,//是否使用代理方式來計算增量更新                 paths: {                     storeinc: '../storeinc'//增量更新插件路徑                 } }; </script> //主資源下載，記住storeinc!前綴來啓用插件     <script data-main="storeincdist/storeinc!test" src="require.js"></script>     <script type="text/javascript">       requirejs.config({             paths: {                 log: [                     'a'                 ],                  b: [                     'b'                 ],                 c: [                     'c'                 ],                 d: [                     'd'                 ],                 e: [                     'e'                 ]             }         });     </script> 另外須要在業務裏的各個依賴前都加上storeinc!如test.js： require(['storeinc!log','storeinc!c','storeinc!d'], function (log, modC, modD) {     log.write('test3 run!!');     log.write('module c\'s name is ' + modC.name);     log.write('module d\'s name is ' + modD.name); }); 接下來看下效果: 第一次咱們把index.html裏的ver項配置設爲2,而後訪問index.html,結果以下圖所示: <a href="http://static.oschina.net/uploads/img/201403/05120723_aWcl.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="wps_clip_image-29258" border="0" alt="wps_clip_image-29258" src="http://static.oschina.net/uploads/img/201403/05120723_WAR7.png" width="204" height="244" /></a> 第二次咱們把index.html裏的ver項配置設爲3,說明此次須要的是版本爲3的內容，結果以下圖所示: <a href="http://static.oschina.net/uploads/img/201403/05120724_WRLX.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="wps_clip_image-13606" border="0" alt="wps_clip_image-13606" src="http://static.oschina.net/uploads/img/201403/05120724_jMON.png" width="225" height="244" /></a> 說明訪問的是增量文件，已經達到增量更新的目的     rstoreinc github地址:<a title="https://github.com/luyongfugx/rstoreinc" href="https://github.com/luyongfugx/rstoreinc">https://github.com/luyongfugx/rstoreinc</a> 好用記得star哦：） 另外說一下個人微博: <a href="http://t.qq.com/waynelu">騰訊:http://t.qq.com/waynelu</a> 新浪:<a title="http://weibo.com/u/1849616271" href="http://weibo.com/u/1849616271">http://weibo.com/u/1849616271</a>javascript