%20(2).svg)
项目简介
本项目是基于 JavaScript 的静态资源本地缓存系统，借助浏览器的 localStorage 对 CSS 和 JS 类型的静态资源进行缓存。用户首次访问时会将资源存于本地，后续访问直接从本地读取，以此节省网络请求，提升页面加载性能。
项目的主要特性和功能
- 动态缓存：首次加载动态加载 JS 并将内容存入 localStorage，非首次加载从 localStorage 读取资源。
- 灵活更新：有完整的缓存更新机制，支持局部和全量更新已存储文件。
- 容错处理：具备良好容错机制，确保系统稳定运行。
- 版本管理：依据配置文件和缓存中的文件版本标识，决定使用缓存还是重新请求资源。
安装使用步骤
1. 引入项目
- npm 安装：运行
npm install ls-cache-files，可按需引入压缩版（/node_module/ls-cache-files/lib/index.min.js）或未压缩版（/node_module/ls-cache-files/lib/index.js）。javascript import LSCacheFiles from 'ls-cache-files' LSCacheFiles.init()```html
```
2. 配置资源
在模板中同步一份配置文件，示例如下：
v0.1.1 配置文件
javascript
window.__LS__MAP = {
'js/vue.js': 'https://j1.58cdn.com.cn/git/hrg-innovate/pc-super-employer-home/static/js/vue.chunk_v20190808162950.js'
}
v0.2.2 配置文件
javascript
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'
},{
version: 1,
url: 'http://j1.58cdn.com.cn/global_app/js/lib/zepto.min.js'
}]
}
3. 其他操作
可使用 LSCacheFiles 提供的 API 进行更多操作，如检查并缓存文件、判断是否需要更新等。
注意事项
- 由于低版本浏览器单个 localStorage key 存储能力有限，该系统不适合存储过大文件。
- 项目支持 TypeScript 声明文件。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】