<p> </p> <p>用增量更新这个算法写了一个requirejs插件storeinc,使用方法如下:</p> <p>首先使用修改后的r.js来进行混淆打包，构建配置如下(请看js/requirejs下的build.js):</p> <p>({</p> <p>    appDir: "../demo/js",</p> <p>    baseUrl: "./",</p> <p>    dir: "../demo/dist",//不走增量更新的文件存放路径</p> <p>    paths: {</p> <p>        log: "a",</p> <p>        storeinc:"../storeinc"//这里插件</p> <p>    },</p> <p>    storeinc: true,//说明走storeinc插件</p> <p>    storedir: "../demo/storeincdist",//混淆后的js存放路径，包括增量文件</p> <p>    lastver:"2", //上一个版本号，如果没有说明是第一次打包</p> <p>    ver:'3',//新版版本号</p> <p>    chunkSize:12,//增量更新块号</p> <p>    modules: [</p> <p>        {</p> <p>            name: "test",</p> <p>            exclude: [</p> <p>                "log","b","c","d","storeinc"</p> <p>            ]</p> <p>        },</p> <p>        {</p> <p>            name: "log",</p> <p>            exclude: [</p> <p>               "storeinc"</p> <p>            ]</p> <p>        },</p> <p>        {</p> <p>            name: "b",</p> <p>            exclude: [</p> <p>                "storeinc","log"</p> <p>            ]</p> <p>        },</p> <p>    ]</p> <p>})</p> <p>运行node r.js -o build.js</p> <p>第一次运行时 node r.js ：</p> <p>    lastver:"1", //上一个版本号，如果没有说明是第一次打包</p> <p>ver:'2',//新版版本号</p> <p>然后到js目录修改各个源文件，第二次运行时：</p> <p>    lastver:"2", //上一个版本号，如果没有说明是第一次打包</p> <p>ver:'3',//新版版本好号</p> <p>然后在index.html里面加入如下代码（请看js/requirejs下的index.html）:</p> <p><script></p> <p>//storeinc相关配置</p> <p>var require = {</p> <p>                ver:"3",//当前版本</p> <p>                storeproxy:false,//是否使用代理方式来计算增量更新</p> <p>                paths: {</p> <p>                    storeinc: '../storeinc'//增量更新插件路径</p> <p>                }</p> <p>};</p> <p></script></p> <p>//主资源下载，记住storeinc!前缀来启用插件</p> <p>    <script data-main="storeincdist/storeinc!test" src="require.js"></script></p> <p>    <script type="text/javascript"></p> <p>      requirejs.config({</p> <p>            paths: {</p> <p>                log: [</p> <p>                    'a'</p> <p>                ],</p> <p>                 b: [</p> <p>                    'b'</p> <p>                ],</p> <p>                c: [</p> <p>                    'c'</p> <p>                ],</p> <p>                d: [</p> <p>                    'd'</p> <p>                ],</p> <p>                e: [</p> <p>                    'e'</p> <p>                ]</p> <p>            }</p> <p>        });</p> <p>    </script></p> <p>另外需要在业务里的各个依赖前都加上storeinc!如test.js：</p> <p>require(['storeinc!log','storeinc!c','storeinc!d'], function (log, modC, modD) {</p> <p>    log.write('test3 run!!');</p> <p>    log.write('module c\'s name is ' + modC.name);</p> <p>    log.write('module d\'s name is ' + modD.name);</p> <p>});</p> <p>接下来看下效果:</p> <p>第一次我们把index.html里的ver项配置设为2,然后访问index.html,结果如下图所示:</p> <p><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></p> <p>第二次我们把index.html里的ver项配置设为3,说明这次需要的是版本为3的内容，结果如下图所示:</p> <p><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></p> <p>说明访问的是增量文件，已经达到增量更新的目的</p> <p> </p> <p> </p> <p>rstoreinc github地址:<a title="https://github.com/luyongfugx/rstoreinc" href="https://github.com/luyongfugx/rstoreinc">https://github.com/luyongfugx/rstoreinc</a></p> <p>好用记得star哦：）</p> <p>另外说一下我的微博:</p> <p><a href="http://t.qq.com/waynelu"><font color="#000000">腾讯:</font>http://t.qq.com/waynelu</a></p> <p>新浪:<a title="http://weibo.com/u/1849616271" href="http://weibo.com/u/1849616271">http://weibo.com/u/1849616271</a></p>
顶部