HTTP caching is divided into two types, but for static resources, I think most people open the mandatory cache, right?
But there is a disadvantage of forced caching that there is no way to guarantee the freshness (latest) of the resources, you can only wait for the cache time to expire to get the latest resource content
So I wrote a library Cache-Hash that specifically deals with HTTP cache busting
I've used it on my blog: https://blog.imlete.cn
Principle
By adding a hash version number to the resources introduced to the website, once the content changes, the hash will change, so that the cache can be broken by changing the url address, which ensures that the resources referenced by the website are up to date.
For example, the following form
<script src="https://demo.com/js/main.js?v=5e74b42bf5"></script>
Usage
You can use CLI (command line tool) or JavaScript API to generate hash for references to static resources
can be installed globally using
npm install cache-hash -g
cache-hash --target source --output public
# abbreviated
cache-hash -t source -o public
If you don't want to install it globally, you can use npx
npx cache-hash --target source --output public
How does it work?
It reads your given target directory, detects all html, css, js in the directory, and generates an AST (Abstract Syntax Tree) for these files, and then compiles the source code back through the ast syntax tree after modifying the contents of the ast syntax tree.
Top comments (0)