利用浏览器缓存localStorage,缓存静态资源(目前支持css,js类型),第二次请求时,直接从本地文件中中读取资源,节约网络请求,优化性能。
模板中同步一份配置文件
window.__LS__MAP = {
'js/vue.js': 'https://j1.58cdn.com.cn/git/hrg-innovate/pc-super-employer-home/static/js/vue.chunk_v20190808162950.js'//资源地址
}
window.__LS__MAP = {
version: 1,
list: [{
version: 1,
url: 'http://c.58cdn.com.cn/git/hrg-innovate/m-super-employer/static/css/main.chunk_v20190830183911.css',//资源地址
//type?: 'css'
},{
version: 1,
url: 'http://j1.58cdn.com.cn/global_app/js/lib/zepto.min.js',//资源地址
//type?: 'js'
}]
}
umd
es5
es6
三种打包结果npm install ls-cache-files
import LSCacheFiles from 'ls-cache-files'
LSCacheFiles.init()
<script src='https://raw.githubusercontent.com/501981732/ls-cache-files/master/lib/index.min.js'>引入
文件: https://github.com/501981732/ls-cache-files/blob/master/lib/index.min.js放入自己公司cdn或者嵌入模板html中
LSCacheFiles.init()
运行成功的存储结果
localSotrage中
html中
<style type="text/css" id="__LS__main.chunk_v20190830183911.css">...</style>
<script type="text/css" id="__LS__zepto.min.js">
需要先配置window.__LS__MAP文件,或者将__LS__MAP挂载到LSCacheFiles上面
可挂载配置文件,默认会读取全局配置文件 *window.__LS__MAP*
根据__LS__MAP配置初始化缓存操作
needFullUpdate 是否全量更新缓存文件
请求url并缓存到本地,并且缓存当前版本
单独调用也会判断
LSCacheFiles.checkAndCacheFile('https://c.58cdn.com.cn/git/hrg-innovate/m-super-employer/static/css/main.chunk_v20190830183911.css',1)
存储表现为
类似checkFileAndCache功能,但是检查本地是否有改文件和版本。每次都会重新请求并缓存文件。so...没啥用
LSCacheFiles.needFullUpdate 自动根据配置文件LSMAP的version字段和localstorage字段判断是否需要全部更新缓存文件, 也可传入needFullUpdate 手动配置是否需要触发全量更新
判断本地存储是否可用,可以根据此字段判断是否手动开启缓存
本地localstorage剩余存储空间,可根据此字段决定是否开启缓存
动态插入文件 自动判断js css
路径
将请求的js css内容插入到模板上
下载文件
promise
Generated using TypeDoc
useage const flag = isType('Array')([])