Skip to content

Latest commit

 

History

History
55 lines (54 loc) · 2.7 KB

README.md

File metadata and controls

55 lines (54 loc) · 2.7 KB
Raw

本地静态资源缓存化 介绍

  该插件主要适用于纯静态资源的本地化，或者是通过webpack打包后赖加载的模式，理论上支持vue react;已在vue中进行了实验
  同样也可以直接在html中使用将项目中的loader.js内的代码直接放在script表标签内

  插件支持两种缓存模式 localStorage 和indexedDB;可进行配置,如果配置了indexedDB，在发现浏览器不支持的情况下回降级到localStorage

插件使用 html

如果已经是一些现有的项目比如项目中的链接地址都是已知的；可以将项目中loader.js中的代码直接复制到项目中，同时执行window._cache_local_.setBaseConfig({...options}), 注意参数的配置，同时注意版本号verison，一旦静态资源有变化必须更新版本号
示例：可以查看example.html

插件使用 vue

  插件本身依赖于webpack、html-webpack-plugin（index.html模板） 、min-css-extract-plugin(css提取),当然如果不单独提取css也没有关系, 示例查看example目录中的vue

const LocalCache = require('localcache');
config.plugin('LocalCache').use(LocalCache, [{
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].css',
      maxRetries: 3,
      type: 'localstorage',
      cacheIsOn: process.env.NODE_ENV === 'production',
      version: version,
      otherJs:''
      ...
    }])

插件配置使用说明

参数 类型 说明
filename string 文件打包格式vue中默认为hash格式[name].[contenthash:8].
chunkFilename 同上
maxRetries number 当不支持缓存的时候遇到js加载进行重试的次数
type string 支持localStorage、indexedDB，未进行配置的情况不走缓存逻辑
cacheSwitch boolean 是否开启缓存模式
version number 版本号，主要是用于清空历史缓存的静态资源信息
jsOmit RegExp 不需要处理的js
cssOmit REgExp 不需要处理的css
otherJs OtherStaticContent 额外在html中追加的js外链或者是code
otherCss OtherStaticContent 额外在html中追加的css外链或者是code
baseKey string localStorage模式下的缓存key前缀 默认为_cache_local_loader_
dbName string indexedDB模式下的库的名称默认为static
storeName string indexedDB模式下的库的表名 默认为test
storeKey string indexedDB模式下建表的主键key 默认为 path
cssExtraFn Function 通过ajax请求将静态资源下载的code额外进行处理 再返回code,比如需要替换某个字符串等等，一般业务场景应该用不到
jsExtraFn Function 同上,

OtherStaticContent

属性 类型 说明
innerHTML string 需要插入的代码块
url string 需要插入的外链