如何保证 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>

使用方式

可以通过使用 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 语法树编译回源代码即可

lete

2022-10-26 15:08:55 +08:00

@qW7bo2FbzbC0 cdn 有两种缓存
1. 缓存原服务器的静态资源，规则由你选择，在缓存期间，任何请求都只会从 cdn 的网络中响应资源给用户(你服务器的任何资源修改 cdn 都不会去刷新(除非你手动在 cdn 里刷新)，只有当缓存时间过了之后才会向你服务器获取)，在此期间不会对你的服务器有任何连接
2. 要么就是协商缓存，那么用户访问还是会去问服务器这个资源是不是最新的，要么就是强制缓存，这就是正常的强制缓存，无论服务器端怎么改变资源，浏览器都不会去访问服务器，只有过期了才会访问服务器

lete

2022-10-26 15:30:43 +08:00

@3dwelcome 看了一下，你列举的 3 个方法，第 1 个没看明白，但后两个方法存在问题，虽然都能解决你帖子的疑问

第 2 种: 使用 etag 实际上是协商缓存，每次请求都会向服务器确认资源有没有变化，如果服务器线路比较拉跨，那么这个请求到服务器的时间也会随之变长，浏览器再等待服务器响应回来也需要时间，如果是强制缓存，就没有那么多的步骤，直接从浏览器本地缓存读取

第 3 种: last-modifed-time ，它也是协商缓存，但区别在于 etag 判断的是标识(hash),last-modifed-time 判断的是最后修改时间，它同样需要把时间发送给服务器去判断