Vue cache busting

Problem

SPA로 웹 Front-end를 개발하다보면 사용자의 브라우저의 캐싱 기능때문에 빌드/배포 후에도 최신 파일의 변경사항이 적용되지 않는 경우가 있다

강력 새로고침(ctrl + shift + F5) 기능을 이용해 이를 해결할 순 있지만 일반 사용자에게 배포 때마다 이것을 요구하는 것은 맞지 않기 때문에 개발자가 이 문제를 해결 해야한다!

Solve

vue-cli를 이용해 생성한 프로젝트의 경우 vue.config.js 파일에 다음과 같은 코드를 추가하여 이 문제를 해결할 수 있다

vue.config.js

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
    filenameHashing: true,
    configureWebpack: (config) => {
        config.output.filename = "js/[name].[hash].js";
        config.output.chunkFilename = "js/[name].[hash].js";
    },
});

vue.config.js 에서 webpack 설정을 해주는 코드로 config를 받아와서 output.filename과 output.chunkFileName에 hash 값을 추가하여 새로 빌드할 때 마다 다른 파일명이 생성되어 배포 시 새로운 파일로 인식해 캐싱된 이전 파일을 참조하는 현상을 해결할 수 있다!