웹 캐시

• 클라이언트와 서버 사이의 통신을 줄여 성능을 최적화 시키기 위해 이전에 가져온 리소스들을 클라이언트에 저장 해두었다가 재사용하는 캐시 기법

클라이언트가 리소스를 요청하면 서버에서 응답을 할 때 header에 정보를 담아 클라이언트에 반환.

위 그림의 내용을 예로 설명

• Content-Length : 1024 바이트의 요청을 응답
• Cache-Control : 클라이언트에 최대 120초동안 캐시 정보를 저장
• ETag : 응답이 만료된 후 리소스가 수정 되었는지 확인하는 유효성 토큰

Cache-Control

Cache-Control HTTP 헤더를 통해 캐싱 정책을 정의

• no-cache : 캐시를 사용하지 않겠다는 뜻이 아니라 응답이 만료된 후 서버의 리소스가 변경되었는지 확인하고 응답이 304번 이면 업데이트 할 필요가 없음
• no-store : 리소스를 저장하지 않음, 사용자가 리소스를 요청할 때 마다 서버에서 응답을 다운로드
• public : 기본 설정, 중간 캐시가 응답을 캐시하는 것이 가능
• private : 단일 대상으로 캐시가 허용, 중간 캐시가 응답을 캐시하는 것을 허용하지 않는다. ex) 사용자 정보가 포함된 html 페이지는 사용자 브라우저가 캐시 할 수 있지만, CDN은 이 페이지를 캐시 할 수 없음.

브라우저 별 cache-control 지원 여부 (android 4.1.2 이하 버전 테스트 포함 )

클라이언트 측 캐싱과 빠른 업데이트 동시에 가능 하게 하는 방법

• 리소스의 URL을 변경하고 콘텐츠가 변경될 때마다 사용자가 새 응답을 다운로드 하도록 함. 일반적으로, 이 작업은 파일의 디지털 지문이나 버전 번호를 파일 이름에 포함하는 방식으로 수행(예: style.x234dff.css).

참고자료 : https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=ko

1. 캐싱 방지하는 코드를 직접 작성해 넣는 방법

**<%@ page import="java.io.*, java.util.*" %>
 
<%--  CSS/JS 파일 캐싱 방지 --%>
<%
	String styleCss = application.getRealPath("/css/style.css");
	File style = new File(styleCss);
	Date lastModifiedStyle = new Date(style.lastModified()); 
 
	SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddhhmmssSSS");
%>
/*적용 방법은  css나 js 파일명 뒤에 xxxx.css?ver=<%=fmt.format(lastModifiedStyle)%> 
이처럼 적으면 되고, 파일이 수정될 때마다 자동으로 수정된 시간 정보를 불러올 것이다. */** 

2. Webpack Caching 전략

웹팩으로 빌드한 결과물이 변경되지 않았으면 계속 캐싱 상태로 남겨서, 별도의 HTTP 요청이 발생하지 않도록 하는 기법에 대해서 정리

Output 파일 이름