정적 자원 캐시 제어 grunt 플러그인

전단 성능 최적화의 중요한 부분은 캐시를 충분히 이용하는 것이다. 예를 들어cache-control,expires,eTag 등을 통해 정적 자원의 실효 시간을 제어하고 많은 대형 사이트의 정적 자원의 실현은 심지어 몇 년이 되었다.이것은 확실히 페이지의 마운트 속도를 향상시켰지만, 동시에 다른 문제를 가져왔다. 나는 정적 자원을 변경했고, 클라이언트가 캐시를 어떻게 업데이트할 수 있는지.
사고의 방향
가장 효과적인 해결 방안은 모든 링크를 수정하는 것이다. 이렇게 하면 새로운 요청이 원시 서버에서 최신 내용을 다운로드할 수 있다.
그렇지만 링크를 어떻게 업데이트합니까?
일반적인 프런트엔드 팀의 방식을 살펴보겠습니다.
index.html 페이지:

<script charset="utf-8" type="text/javascript" src="a.js?t=20131111"></script>

여러분은query를 추가하는 형식으로 링크를 수정할 것입니다.이렇게 하는 것은 비교적 직관적인 해결 방안이지만 방문량이 비교적 많은 사이트에서 이렇게 하면 새로운 문제에 직면하게 될 것이다. 왜냐하면 발표하는 과정에서 index가 있기 때문이다.html과 a.js는 항상 선후의 순서가 있기 때문에 중간에 크거나 작은 시간 간격이 나타난다.대형 인터넷 응용 프로그램의 경우 아주 작은 시간 간격 내에도 새로운 사용자의 방문이 나타날 수 있다.사용자가 방문한 페이지가 js와 일치하지 않아 오류가 발생할 수 있습니다.
이것이 바로 대형 웹 응용 프로그램이 버전이 출시되는 과정에서 전단 오보 로그가 집중적으로 나타나는 이유이자 일부 인터넷 회사들이 한밤중까지 야근을 하고 방문이 저조한 시기에 다시 출시되기를 기다리는 이유 중 하나이다.또한 정적 자원 파일 버전 업데이트는 '덮어쓰기' 이기 때문에 페이지는query를 수정하여 업데이트해야 하기 때문에 CDN 캐시를 사용하는 웹 제품에 있어 CDN 캐시 공격에 직면할 수 있습니다.
버전이 업데이트되었을 때 모든 인용 링크를 수정하는 것도 공사 관리와 상반되는 일이다. 적어도 우리는 버전 번호 수정 문제를 자동화하기 위해'찾기-바꾸기'도구를 필요로 한다. ts를 수동으로 수정하는 것이 얼마나 사람을 붕괴시키는 일인지, 특히 빈번하게 발표되는 상황에 대해 알아야 한다.
이 문제에 대해 현재 가장 좋은 해결 방안은 파일 내용에 기반한hash버전번호이다. 즉, 파일 내용을hash하고hash값으로 시간 스탬프를 대체하는 것이다.이렇게 하면 파일이 변하지 않을 때 버전 번호가 변하지 않고 파일이 변하면 버전 번호가 자동으로 업데이트된다.
발표

<script charset="utf-8" type="text/javascript" src="a.js"></script>

저절로 변하다

<script charset="utf-8" type="text/javascript" src="a.js?t=ba9c11c7"></script>

이상의 사고방식을 바탕으로 저는 grunt 플러그인을 썼습니다. 이렇게 발표하기 전에 명령을 입력하고 grunt를 입력하면 파일이 압축되고 시간을 바꾸어 신마를 찌르는 모든 것이 자동으로 완성됩니다. 기가 막힙니다!
원래 나는 기존의 grunt plugin이 있는지 찾아보려고 했지만 내 생각에 맞는 것을 찾지 못했으니 스스로 손을 써라.
plugin 보러 가기를 누르다
npm에 게시, npm install asset-cache-control 다운로드
 
문제.
위의 방법은 정적 자원query값을 바꾸는 것이고 발표 과정에서 자원 덮어쓰기 선후 문제를 해결하지 못했기 때문에 대형 사이트에 대해 아래의 수정을 하는 것이 더욱 적합하다.

<script charset="utf-8" type="text/javascript" src="a_ba9c11c7.js"></script>

다음 버전
1. 캐시를 제어할 정적 자원을 모두 열거하려면 나중에 디렉터리만 열거할 수 있습니다
2. 이전에 타임 스탬프를 찍었지만 t=이 아닌 경우 reset