프런트 엔드 인터페이스가 js 및 css 파일의 캐시를 자동으로 지우도록 만드는 방법

웹 프로젝트 개발 과정에서 CSS, js 파일을 자주 참조하는데, 파일을 업데이트한 후 캐싱 문제가 자주 발생합니다. (코드는 분명히 변경되었으나 브라우저에서 접속하면 아무런 변화가 없습니다.) 다음 두 가지 해결 방법을 사용하세요.

1. 브라우저 캐시를 수동으로 삭제합니다.

2. 버전 번호를 추가합니다(예:layout.css?v=1).

개인적으로는 2번 방법이 더 빠르다고 생각합니다. 브라우저 캐시 응답을 삭제합니다. 하지만 매번 버전 번호를 변경하는 것은 귀찮기 때문에 버전 번호를 자동으로 추가하는 방법을 찾아야 합니다.

제가 수집한 방법은 다음과 같습니다.

방법 1: html에 버전 번호를 자동으로 추가할 수 있습니다. js를 통해

<script type="text/javascript"> 
document.write("<link rel=&#39;stylesheet&#39; type=&#39;text/css&#39; href=&#39;/css/layout.css?v="+new Date().getTime()+"&#39;>");  
</script>

방법 2: jsp 페이지인 경우 java 코드를 사용하여 타임스탬프를 생성할 수 있습니다(jsp 페이지인 경우 방법 1을 사용할 수도 있지만 이 방법이 더 편리합니다)

<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">

방법 3: node.js 자동 구성 등을 사용하는 등 다른 방법을 사용하여 버전 번호를 추가하세요.

ps : 캐시를 지우는 목적은 페이지를 온라인에 올릴 때 페이지 업데이트를 제때에 확인하는 것입니다. , 정식 환경에 배포하면 더 이상 변경되지 않습니다), 캐시된 페이지에 더 빠르게 액세스할 수 있으므로 버전 번호를 수정한 다음 업데이트가 필요할 때 고정된 버전 번호를 변경하는 것이 좋습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

H5에서 그림의 공백을 해결하는 방법

html5의 페이지 구조에서 주의해야 할 측면

localStorage 및 sessionStorage 사용 방법

위 내용은 프런트 엔드 인터페이스가 js 및 css 파일의 캐시를 자동으로 지우도록 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!