HTTP 캐시를 최신 상태로 유지하는 방법

HTTP 캐싱은 두 가지로 나뉘는데 정적 자원의 경우 대부분 필수 캐시를 여는 것 같죠?

하지만 강제 캐싱의 단점은 리소스의 신선도(최신)를 보장할 수 있는 방법이 없고, 최신 리소스 콘텐츠를 얻기 위해 캐시 시간이 만료될 때까지만 기다릴 수 있다는 것입니다.

그래서 HTTP 캐시 버스팅을 특별히 다루는 라이브러리Cache-Hash를 작성했습니다.

I've used it on my blog: https://blog.imlete.cn

원칙

웹사이트에 소개된 리소스에 해시 버전 번호를 추가하여 콘텐츠가 변경되면 해시가 변경되므로 URL 주소를 변경하여 캐시를 깨뜨릴 수 있으므로 웹사이트에서 참조하는 리소스가 최신 상태임을 보장합니다. .

예를 들어, 다음 형식

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

용법

CLI(명령줄 도구) 또는 JavaScript API를 사용하여 정적 리소스에 대한 참조용 해시를 생성할 수 있습니다.

다음을 사용하여 전역적으로 설치할 수 있습니다.

npm install cache-hash -g

cache-hash --target source --output public

# abbreviated

cache-hash -t source -o public

전역으로 설치하지 않으려면 npx를 사용할 수 있습니다.

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

어떻게 작동합니까?

주어진 대상 디렉토리를 읽고 디렉토리의 모든 html, css, js를 감지하고 이러한 파일에 대한 AST(Abstract Syntax Tree)를 생성한 다음 ast의 내용을 수정한 후 ast 구문 트리를 통해 소스 코드를 다시 컴파일합니다. 구문 트리.