Webpack-localcache-plugin NPM

webpack 插件实现localstorage缓存js

0x01

移动端由于一些webview的坑，只依赖浏览器自有的缓存是不可靠的，例如ios上的webview的缓存是内存缓存，进程杀掉后就释放了。微信等一些app的webview可能由终端自己实现了一些缓存策略导致webview发出304请求，在移动端有时也是比较慢的，因此在必要时需要引入一套localstorage方案来缓存js。

0x02 使用方式

复制localCacheHelper.js到工程目录下，并引入到html当中

   <script src="localCacheHelper.js"></script>  OR
   <script>inline localCacheHelper.js</script>

在webpack.config.js引用lib目录下的LocalStoragePlugin

const LocalStoragePlugin=require('../lib/LocalStoragePlugin');

//some webpack config
plugins:[
	 new LocalStoragePlugin({
        ignoreChunks:['chunkName'],
        manifestName:'localcacheManifest.json',
        manifestFormat:'json'
    }),
]

执行打包之后会在output的目录下多出一个localcacheManifest.json文件，里面记录了命名chunk的信息，格式如下：

	{
		"chunkA": {
			"fileName": "js/chunkA.hashA.js",
			"hash": "hashA"
		},
		"chunkB": {
			"fileName": "js/chunkB.hashB.js",
			"hash": "hashB"
		}
	}

将如上manifest引入到html当中

window.localcacheManifest={
		"chunkA": {
			"fileName": "js/chunkA.hashA.js",
			"hash": "hashA"
		},
		"chunkB": {
			"fileName": "js/chunkB.hashB.js",
			"hash": "hashB"
		}
	};

配置localcacheHelper.js
```
```
window.webpack_local_cache.init({
```
publicPath:'../dist/', manifest: window.localcacheManifest, reporter:{ error:function(err){ console.log(err); } } }); window.webpack_local_cache. loadChunks('vendor','app',function(result){ console.log('load result ',result); window.runApp(); });
```
``` 
```
这样处理之后就可以把js缓存到localstorage了。

5.其他

插件本身只处理命名的chunk，也就是只缓存有名字的chunk，entry chunk肯定是有名字的，对于异步的chunk，需要在require.ensure加上第三个参数。
在使用require.ensure的地方，外面需要套上一层
```
	```
```
window.webpack_local_cache.loadChunks('asyncLib', function(result) { console.log('load status ',result); require.ensure([], function (require) { require('path to async module'); }, 'asyncLib'); });
```
	```
```
这样做的原理是require.ensure由webpack静态分析，编译出named async chunk，使得插件可以处理这个chunk，再由localcacheHelper去加载这个chunk并缓存。

0x03 API

LocalStoragePlugin API
new LocalStoragePlugin(opt)
opt {object} 配置对象
- opt.manifestName 生成的manifest文件名
- opt.manifestFormat 生成格式json|js，default:json
- opt.manifestVariableName 当manifestFormat为js时才有用，配置了这个之后生成的js文件内容为window['mainfestVariableName']={};
- opt.ignoreChunks {array} 忽略的chunk名称的数组
localcacheHelper.js API
所有的api都在webpack_local_cache这个对象上
- init(opt:object) 初始化helper - opt.manifest 插件生成的manifest对象 - opt.publicPath 线上资源引用路径 - opt.reporter {object} 上报对象 - opt.reporter.error {function} 错误信息上报的函数 - opt.cachePrefix localStorage key的前缀，默认使用当前页面路径作为前缀 - opt.disableCache 传true时，不会使用localStorage当中的代码 - opt.context 调用包装函数时的上下文，默认为null，有时需要传window，特别是在配合webpack dllPlugin时需要用到。 - opt.disableLog 禁用log输出。 - opt.combo {function} 对加载的资源进行combo，该函数需要返回一个combo之后的url。
- loadChunks(chunks:array,onLoadEnd:function) - chunks {array} 需要加载的chunk列表，并且chunk也会按照这个顺序执行 - string|object，当chunk是对象时，需要包含如下字段。 - chunk.chunkName chunk名名称 - chunk.params {object} - chunk.params.lazy {boolean} 是否延迟执行该chunk - onLoadEnd(result:object) 加载完成回调，并且会传入结果对象 - result.status success|fail - result.failedChunks array 表示那些chunk没有正确加载，只有在状态是fail的时候才有这个数组
- getConfigs 获取init时传入的配置对象
- getInstalledChunks 获取已经加载的chunk