캐시 버전명을 혁명적으로 변경해서 웹로딩 빠르게하기!

결론부터 말하자면,

<script src="/js/location.js?v={{ filemtime('js/location.js') }}"></script>

 

 

본론시작!

나는 기존에

<script src="/js/location.js"></script>

이렇게만 코드를 작성하여 blade 및 html에서 스크립트 파일을 참조하고 있었다

그런데 브라우저의 입장에서는 파일 이름과 경로가 같으면 해당 파일을 이미 읽었으므로 캐시에서 가져오려 한다

그래서 location.js 파일을 한 번 읽은 다음부터는 수정을 해도 반영 안되는 현상이 생겼음..!

 

 

근데 캐시가 뭔가요?

자주 쓰는 데이터를 미리 복사해 놓는 임시 장소로써,
웹 로드할때마다 모든 리소스를 읽으면 느려지니 캐시를 읽음으로서 로딩 시간 단축시킴

 

감자는 생각했다

- 스크립트 파일을 수정을 했을 때, 버전명을 추가한다면 새롭게 읽어오므로 수정사항이 반영 되어 있겠지!

<script src="/js/location.js?v={{ date('his') }}" /></script>

- 그래서 이렇게 짰다. 이렇게 코드를 짠다면 date('his')는 php함수에서 현재의 시간과 분 초를 나타내니

- location.js?v=091050 이런 식으로 계속 버전명이 바뀔 것이고
- 그렇다면 수정사항이 즉각 즉각 바뀌게된다!

라고...

 

하지만 이 코드의 문제점은,

웹을 불러 올 때마다 시간이 변하므로 location.js를 계속 새롭게 읽어온다

(수정사항이 없으면 캐시에서 읽어와야 한다. 그래야 웹 로딩 시간이 단축되니까!)

그러므로, date 함수를 이용하는 것은 적절치않다

 

그러다 알게 된 것은 바로 filemtime 이란 함수이다..!

 

filemtime 함수를 이용하면 해당 파일이 수정된 시간을 가져와서 리턴하므로
스크립트 파일이 수정 되었을 때만 버전명이 바뀌게 됨!

어쩜 이렇게 혁명적이지? 이것을 보고 date(his)를 넣던 모든 곳에서 filemtime으로 바꾸었다

 

<script src="/js/location.js?v={{ filemtime('js/location.js') }}"></script>

 

참고로 filetime이 아니고, 중간에 m이 있어야한다. 왠지 file modifed time의 약자인 것 같음

 

조금씩 성장해 보자!