很多时候,我们的网站上都会对静态资源开启 HTTP 缓存,HTTP 缓存分为两种,但对于静态资源来说,我想,大部分人开的因该是强制缓存吧?
不过强制缓存有个缺点那就是没法保证资源的 新鲜度(最新的) ,只能等待缓存时间过期才能获取到最新的资源内容
于是我写了一个库 Cache-Hash 在线求 star✨ ,专门处理 HTTP 缓存破除的
我的博客已经用上了: https://blog.imlete.cn
原理
通过给网站引入的资源,打上 hash 版本号,一旦内容改变,hash 会随着改变,这样即可通过改变 url 地址来破除缓存,能够保证网站所引用的资源是最新的
例如以下形式
<script src="https://demo.com/js/main.js?v=5e74b42bf5"></script>
使用方式
可以通过使用 CLI (命令行工具) ,也可以使用 JavaScript API 来对静态资源的引用生成 hash
可以全局安装使用
npm install cache-hash -g
cache-hash --target source --output public
# 简写
cache-hash -t source -o public
如果你不想全局安装,可以使用 npx
npx cache-hash --target source --output public
它是如何工作的?
它通过读取你给定的 target 目录,检测目录内的所有 html 、css 、js ,并对这些文件生成 AST(Abstract Syntax Tree) 即抽象语法树 ,之后通过修改 ast 语法树的内容后,再通过 ast 语法树编译回源代码即可