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则是字符为单位，具体的实现原理请看:https://github.com/luyongfugx/hcliuLoad/blob/master/hcliuLoad.ppt

下面我们来看下这个插件的使用过程：

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插件:

再看下面的代码:

接下来安装构建工具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文件.如下图所示:

然后我们将1.0.6文件夹放到,sea-modules\examples\hello文件夹下（js资源从这个目录拉取）

启动web服务器，在浏览器输入http://localhost/spm/app/hello.html ,访问正常，看一下网络请求，由于是第一次访问所以，看到js访问了main-1.0.6.js这个文件

另外看一下localstorage，已经把这个文件内容和版本号存入了本地存储

再刷新一次，已经不会有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

然后修改package.json,把版本修改为1.0.7,把上个版本修改为1.0.6如下图所示:

然后执行spm-storeinc-build 命令进行构建，这时候发现在dist目录下生成了一个1.0.7目录，如下：

发现多了一个main-1.0.6_1.0.7.js的js文件这个文件就是传说中的增量文件了，就是说这个文件的内容是main.js从1.0.6变化到1.0.7所修改的内容，我们打开文件可以看到如下内容：

发现这里只有刚才修改的js的更新内容,然后我们将1.0.7文件夹放到,sea-modules\examples\hello文件夹下,并修改\app\hello.html把版本改为1.0.7,然后重新访问

http://localhost/spm/app/hello.html ,这时候发现浏览器访问的是main-1.0.6_1.0.7.js这个增量文件：

整个页面功能也都ok,在看看console平台，发现我们刚才的修改已经生效，console打出了1.0.7版本的相关信息:

说明增量更新已经生效，浏览器以最小的流量损耗是想了一次js版本更新，以这个demon为例，如果走普通的版本更新方式，需要全两下载main.js，需要下载一个2k的文件，而走增量更新则只需要下载0.5k左右的文件，流量大大节省！！