Cachestatic NPM

本地静态资源缓存化介绍

  该插件主要适用于纯静态资源的本地化，或者是通过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	需要插入的外链

js css html localStorage cache indexedDB webpack plugin cachestatic static html-webpack-plugin

html-webpack-plugin

@everything-registry/sub-chunk-1283 @zalastax/nolb-cac

1.0.1

3 years ago

本地静态资源缓存化 介绍

插件使用 html

插件使用 vue

插件配置使用说明

OtherStaticContent

本地静态资源缓存化介绍