이전에 포스팅한 2.1과 이어져용
Cache-Control
HTTP 헤더의 옵션이다. 서버에 캐시를 요청할 수 있다.
no-cache
Cache-Control: no-cache캐시를 사용하기 전, 서버에게 캐싱된 자원을 사용해도 되는지 확인을 받는다. (만료된거니?)
no-store
Cache-Control: no-store캐시 사용 안해!
public
Cache-Control: publicprivate과 달리 모든 환경에서 캐시 사용 가능!
private
Cache-Control: private오직 브라우저 환경에서만 캐시 사용가능하다. 기타 외부 캐시 서버에서는 사용이 불가하다.
max-age
Cache-Control: max-age=604800캐시의 유효시간이다.
max-age가 0인것과 no-cahce는 동일한 의미이다.
매번 다시 받기 싫어
no-cache는 한번 확인을 받는다고 했다.
서버야.. 이거 만료가 되긴헀는데... 내가 이거 그냥 사용해도 될까? 서버에서 바뀐거 없지? 그치?
브라우저는 서버에게 조심스럽게(?) 자원에 변화가 있었는지 찔러본다. 서버에서 바뀐거 없어! 그냥 써! 라고 하면 브라우저는 넙죽 그냥 쓰면 된다. (응답 트래픽인 아주 작은 사이즈의 트래픽 발생) 물론 바뀐게 있다면 새롭게 받아야 할 것이다.
서버는 어떻게 브라우저에 있는 캐시 데이터와 서버의 최신 데이터가 다른지 여부를 알 수 있을까!
ETag
특정 버전에 대한 식별자이다. 컨텐츠에 변화가 없었다면 웹 서버가 전체 응답을 다시 보낼 필요가 없다! 그걸 위해서 ETag가 사용된다. 서버는 브라우저에게 컨텐츠를 보낼때 ETag를 붙여 보내고 자신도 가지고 있을것이다. 브라우저는 이거 사용해도 돼? 하면서 해당 ETag를 서버에게 보낼것이다! 서버에서 컨텐츠에 변화가 없었다면 브라우저에게 받은 ETag와 동일할 것이며, 변화가 있었다면 ETag또한 다시 생성되기 때문에 다를 것이다.
cache를 길게 걸어놓긴 했는데 서버에서 바뀌면 어떻게 즉각적으로 반영하지?
HTML 파일에 캐시가 길게 걸려있다면 즉각적인 반영을 할 수 없을 것이다. 따라서 no-cache 옵션을 설정하면 서버에 한번씩 물어보게 할 수 있다. 최신으로 변경되었다면 바로 반영 될 것이다.
JS와 CSS 또한 항상 최신이어야 한다. 다만 이 친구들은 no-cache 설정은 지양!
HTML이 항상 최신으로 유지되는 한은 JS와 CSS 파일은 항상 최신으로 유지된다. 따라서 max-age를 매우 길게 줘도 된다.
unusedcss
빨간선이 사용되고 있지 않는 양이다. 상당하다!
purgecss
purgecss 확인해보쟝 :)
html, js에 있는 문자열들을 추출, css의 classname과 비교한다. 사용하고 있지 않는 className이 있디면 해당 class들을 삭제한다.
purge css를 devDependencies로 설치한다.
build 명령어를 통해 static한 css, js html 파일을 만들어준다. 했다면 build파일이 생성될것이다.
package.json에 명령어를 추가한다.
- ./build/static/css/*.css 모든 css파일을
- --output ./build/static/css/ 에 덮어씌우고
- --content ./build/index.html ./build/static/js/*.js 얘네와 비교해달라
"perge": "purgecss --css ./build/static/css/*.css --output ./build/static/css/ --content ./build/index.html ./build/static/js/*.js"perge 이전 다운로드 용량을 보자.
perge 이후 다운로드 용량을 보자.
상당히 줄었다 :)
근데 perge를 적용하고 css가 좀 망가지는 경우가 있다.😥 문자열을 검사할 때 다소 부정확한 경향이 있다.
defaultExtractor
pergecss의 configuration에 defaultExtractor 옵션이 있다. 어떤 규칙으로 문자열들을 비교할 것인지 정한다.
