# html-webpack-cache-plugin
> Based on the functions of html-webpack-plugin that simplifies creation of HTML files to serve your webpack bundles, we can cache the webpack bundles using localstorage to optimize the page loading speed
Latest version **2.1.2** (published 2020-10-30) · MIT license · 0 weekly downloads
## Install
```sh
npm install html-webpack-cache-plugin
pnpm add html-webpack-cache-plugin
yarn add html-webpack-cache-plugin
bun add html-webpack-cache-plugin
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.1.2 |
| Published | 2020-10-30 |
| First published | 2019-02-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 0 |
| Unpacked size | 32.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | huangwenming |
| Maintainers | huangwenming |
| Keywords | webpack, plugin, html, cache, html-webpack-cache-plugin, html-webpack-plugin |
## Links
- npm: https://www.npmjs.com/package/html-webpack-cache-plugin
- Repository: https://github.com/huangwenming/html-webpack-cache-plugin
- Issues: https://github.com/huangwenming/html-webpack-cache-plugin/issues
- npm.io page: https://npm.io/package/html-webpack-cache-plugin
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 2.1.2 (latest) — 2020-10-30
- 2.1.1 — 2020-08-03
- 2.1.0 — 2020-04-28
- 2.0.0 — 2020-04-24
- 1.0.3 — 2019-03-06
- 1.0.2 — 2019-02-27
- 1.0.1 — 2019-02-16
- 1.0.0 — 2019-02-16
## README
# html-webpack-cache-plugin
> Based on the functions of [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) that simplifies creation of HTML files to serve your webpack bundles, we can cache the webpack bundles using localstorage or indexedDB to optimize the page loading speed.
## 插件功能
1. 将原来webpack产出的bundle进行缓存处理，包含js和css，以达到二次打开页面秒开的效果。
只使用html-webpack-plugin产出的代码是：
```
```
配合使用html-webpack-cache-plugin产出后的代码（以localstorage为例）是：
头部的css处理：
```
```
body部分的js处理：
```
```
2. 支持产出bundle更新后，缓存也同步更新，无需担心localstorage的存储空间。
一般webpack产出的bundle的名字上都会带上hash来区分版本，如a.xxzz.js文件，使用xxzz来表示版本号；由上例中
可知，我们是采用产出的bundle的路径名作为了该文件在localstorage中的key，版本更新的时候，我们会把新的key值
存入到localstorage，但是统一域名下localstorage的限制是5M，所以必须在localstorage中同一文件的旧key值
删除。
```
// 当存入新的key值之前，需要遍历localstorage找到同一文件的旧key值，然后删除
localstorage.removeItem("a.xxzz.js")
localstorage.setItem("a.xxzy.js", jsContent)
```
## 如何使用
**前提条件：**
1.支持 webpack4 + html-webpack-plugin(>=3.0.0);
2.要求bundle产出不跨域; bundle的名字为`filename + hash + 后缀结构`
```
npm i html-webpack-cache-plugin --save-dev
```
```
// webpack.conf.js
// 注意：该插件需要在plugins中的位置在html-webpack-plugin之后使用
const HtmlWebpackCachePlugin = require('html-webpack-cache-plugin');
webpackConfig.plugins.push(
new HtmlWebpackCachePlugin({
// 过滤掉的js，即不进行缓存处理，值为空或正则表达式
jsOmit: '',
// 过滤掉的css，即不进行缓存处理，值为空或正则表达式
cssOmit: '',
// 缓存类型，支持 indexedDB 和 localstorage， 默认为 localstorage
type: 'indexedDB',
// dbConf 在选择 indexedDB 缓存类型时采用，非必须配置项
dbConf: {
// 数据库名
dbName: 'test',
// 数据库版本
version: 1,
// 对象仓库名（表名）
storeName: 'cache',
// 索引键名字
storeKey: 'path'
}
})
);
```
**打开过程日志**
url中携带`supportCacheDebug=1`参数即可
## 效果截图
下面的截图来自实际项目：
---
_Source: https://npm.io/package/html-webpack-cache-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._