1.0.2 • Published 8 years ago

gulp-tinystorage v1.0.2

Weekly downloads
1
License
ISC
Repository
github
Last release
8 years ago

mahua ##简介 gulp-tinystorage是一个gulp插件,用来帮助开发者进行自动化构建,主要作用是将页面中的js加载按文件的md5进行localstorage存储,旨在减少一次或多次的js资源加载,哪怕服务端做了304相应的,依然能减少一次网络请求,还是有很强的实用价值

##安装

npm install tiny-storage

#使用场景 首先需要你的每一个js文件都是严格按照模块化思想(AMD、CMD)开发,即js文件只做模块定义,坚决不能有自执行的js模块,当然(function() {}) ()子执行是没有问题的。

需要您 的CDN支持combourl模式的加载,即能通过一个url访问加载物理上不同的模块,如: 腾讯的CDN combo加载为http://wx.gtimg.com/c/=a.js,b.js,c.js

页面的启动点是唯一的,类似如下形式。

<script type="text/javascript">
 require ('startup') ();
</script>

##用法 在gulp的构建流中使用即可,开发者在开发时可用fiddler(Mac下可使用Charles)做辅助的请求转发

对于html页面需要如下的格式

<!--tinystorage-->
<script type="text/javascript" src="./js/a.js"></script>
<script type="text/javascript" src="./js/c.js"></script>
<!--endtinystorage-->
<!--tinystorage-->
<script type="text/javascript" src="./js/b.js"></script>
<!--endtinystorage-->

用gulp进行如下的构建

gulp.src ('./index.html')
    .pipe (tinyStorage({
        combourl: function (list) {
            return 'http://www.test.com/c/=' + list.join(',')
        }
    }))
    .pipe (gulp.dest ('./dist'))

其中的comburl传入需要加载的模块文件名,你需要按照你自己的规则拼接成一个combourl。

构建后变为如此形式:

<script type="text/javascript">(function () {var list=[];if (window.localStorage) {
    if (localStorage["tinystorage-a-463c4e8c391639aaa2459d9c72c45329.js"]) {
	var sc = document.createElement("script");
	sc.text=["(",localStorage["tinystorage-a-463c4e8c391639aaa2459d9c72c45329.js"],") ()"].join("")
	document.body.appendChild(sc);
}else {
list.push ("a-463c4e8c391639aaa2459d9c72c45329.js")
}
}else {list.push ("a-463c4e8c391639aaa2459d9c72c45329.js")}
...
...

如此实现如果文件没有版本更新(md5一致)则优先从localstorage获取模块定义,否则加入到变化列表等待加载。

收集到所有发生版本变更的js文件,使用一次combourl进行一次统一加载,加载完成后会更新原有的localstorage存储(删除老的,加入新的)

这样每次发布我们只需要发布有变更的模块,避免因一个小模块的变动导致整体cache失效的问题