如何解决 HTTP强制缓存的本地缓存，让网站实时获取最新的资源

很多时候，我们的网站上都会对静态资源开启 HTTP 缓存，HTTP 缓存分为两种，但对于静态资源来说，我想，大部分人开的因该是强制缓存吧？

不过强制缓存有个缺点那就是没法保证资源的 新鲜度(最新的) ，只能等待缓存时间过期拆能获取到最新的资源内容

于是我写了一个库 Cache-Hash 在线求 star✨ ，专门处理 HTTP 缓存破除的

我的博客已经用上了: https://blog.imlete.cn

原理

通过给网站引入的资源，打上hash版本号，一旦内容改变，hash会随着改变，这样即可通过改变url地址来破除缓存，能搞保证网站所引用的资源是最新的

例如以下形式

<script src="https://demo.com/js/main.js?v=5e74b42bf5">script>
1

使用方式

可以通过使用 CLI (命令行工具) ，也可以使用 JavaScript API 来对静态资源的引用生成hash

可以全局安装使用

npm install cache-hash -g

cache-hash --target source --output public

# 简写

cache-hash -t source -o public
1
2
3
4
5
6
7

如果你不想全局安装，可以使用npx

npx cache-hash --target source --output public
1

它是如何工作的?

它通过读取你给定的 target 目录，检测目录内的所有html、css、js，并对这些文件生成 AST(Abstract Syntax Tree) 即抽象语法树 ，之后通过修改 ast 语法树的内容后，在通过 ast 语法树编译回源代码即可