[js/css] 배포 파일 업데이트 시 캐시 방지

이번에 사용자 포탈에 war파일을 배포해서 업데이트를 했는데, 로컬에서 브라우저로 포탈에 접속할때 기존 캐시 파일로 인해 수정이 안되는 문제가 발생했다.

로컬에서 강력 새로고침을 하면 캐시파일이 없어지고 업데이트된 js파일을 가져올 수 있지만, 이 방법은 단편적이기 때문에 근본적인 문제 해결이 필요했다.

 

방법

파일 경로에 임의의 쿼리스트링( 단순 인자)를 추가한다.

쿼리스트링 추가이기 때문에 실제 파일 경로나 파일명을 바꿀 필요는 없다.

이렇게 추가된 쿼리스트링 명만 바꿔도 다른파일로 인식하기 때문에 서버 관리도 편하다.

 

css	<link rel="stylesheet" type="text/css" href="파일의 파일 경로?쿼리스트링"> ex) <link rel=stylesheet" type="text/css" href="/common/css/common.css?v=20205301201">
js	<script language="javascript" type="text/javascript" src="파일의 파일 경로?쿼리스트링"></script> ex) <script language="javascript" src="/app/ResourceBundle.js?v=202005301201"></script>
import	@import url('파일의 파일 경로?쿼리스트링') ex) @import url('/common/css/common.css?v=202005301201')

이렇게 뒤에 쿼리스트링을 추가해놓고 나중에 버전이 달라졌을때마다 값을 바꾸면 같은 경로의 파일임에도 다른파일로 교체되었다 인식하여 파일을 새로 다운받습니다. -> 캐시문제 해결.

 

 

출처 : kingji8life.tistory.com/207

[CSS/js] 수정/배포로 파일 업데이트 시, 캐시 방지 & 강력 새로고침(캐시초기화)