Cache busting

What is the purpose of cache busting and how can you achieve it?

Cache busting의 목적은 무엇이고 어떻게 적용할 수 있습니까?

 

나의 답변

브라우저에서 Cache를 남겨 변경하지 않은 소스에 대하여 다시 가져오지 않기 때문에 개발 중 코드를 변경하더라도 이가 적용되지 않는 경우가 있는데 이 때, 기존의 Cache를 없애고 변경한 코드를 반영하기 위한 행위를 Cache busting이라 한다.

Cache busting을 위해서는 크롬의 개발자 도구를 활용하여 캐시 비우기 및 강력 새로고침을 하거나 수정되어야할 파일 이름에 버전정보를 넣는다.

 

추가 학습내용

Cache busting은 방문자가 자주 수정되는 파일을 사용하는 경우 유용하다.

Cache busting을 하는 방법은 다음과 같다.

• File name versioning ( e.g. style.v2.css )
• File path versioning ( e.g. /v2/style.css )
• Query strings ( e.g. style.css?ver=2 )

이 3가지 방법중 Query string방법은 CDN혹은 proxy를 사용하는 경우 사용하지 않을 것을 권고한다. 그러므로 Cache busting을 할 때는 File name이나 File path를 변경 후, 이를 HTML에 적용하는 방식을 따르도록 한다.

 

Webpack

webpack을 사용하는 경우에는 webpack.config.js파일의 output을 수정하여 설정할 수 있다.

xxxxxxxxxx
    output: {
        path: path.join(__dirname, '/src/'),
        filename: '[name].[chunkhash:8].js',
    },

 

참고

https://www.keycdn.com/support/what-is-cache-busting

https://sudalkim.tistory.com/11