vue2 cache busting

목적

웹 서버에 파일을 업로드하여 배포하였을때 이전에 배포했던 파일이 캐시로 남아있는 이슈가 있다.

이를 해결하기 위한 방법으로 vue 파일을 빌드할때 code busting 방법을 사용했다.

(code busting: 브라우저에서 캐시된 파일들의 새로운 버전을 가져오기 위한 방법 중 하나입니다.)

코드 버스팅은 브라우저 캐시에 저장된 파일이 변경되었을 때, 브라우저에서 캐시된 파일을 새로운 버전으로 대체하기 위해 사용됩니다. 일반적으로 파일의 이름에 해시 값을 추가하여 새로운 파일 버전을 식별합니다. 예를 들어, 파일 이름이 app.js인 경우, 이를 app.xj3k4l5.js와 같이 해시 값을 추가하여 변경합니다. 이렇게 해시 값을 추가하면 파일의 내용이 변경될 때마다 파일 이름이 변경되므로, 브라우저는 이전에 캐시된 파일이 아닌 새로운 파일을 가져와야 합니다.

과정

webpack과 vue-cli를 사용하여 해시 값을 파일 이름에 추가하도록 설정합니다.

vue.config.js

module.exports = {
  filenameHashing: true,
  configureWebpack: {
    output: {
      filename: 'js/[name].[hash].js',
      chunkFilename: 'js/[name].[hash].js'
    }
  },
  ...
}

결과

코드 버스팅을 구현하면, 변경된 파일의 새 버전이 브라우저에 캐시될 때마다, 브라우저에서 새 파일을 가져오도록 강제할 수 있습니다. 이를 통해 사용자가 항상 최신 버전의 애플리케이션을 사용할 수 있으며, 성능도 개선됩니다.