vue로 만든 웹사이트를 배포했는데,
이 파일과 저 파일을 변경하여 재배치하는 작업이 많을 것입니다.
여기에서 문제가 클라이언트 브라우저에서 첫 번째 파일을 수신하고 저장하는 경우
수정 후 배포하더라도 원본 파일은 사용자의 브라우저에 캐시로 저장됩니다.
변경 사항이 반영되지 않는 경우가 있습니다.
매우, 매우 성가시다.
그래서 예를 들어 라우터가 변경될 때마다 서버에 요청을 보내는 것과 같은 몇 가지 가능성을 생각했습니다.
버전을 확인한 후 버전이 잘못된 경우 리디렉션하는 방법을 생각했습니다.
글쎄요 가능하지만 서버가 책임이 될 것이라고 생각했습니다 (모름)
어쨌든 방법은 다음과 같습니다.
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 파일을 수정합니다.
js 파일이 수정되면 임의의 문자열이 추가되어 배포됩니다.
따라서 브라우저에서 새로 고침할 때 js 파일을 수정하면 파일 이름이 변경되므로 캐시에 적용되지 않습니다.
테스트해볼까요?
관리자 도구의 네트워크 탭에서 테스트할 수 있습니다.
# 먼저 캐시를 설정하지 않으면
웹 브라우저로 접속하면 이렇게 js 파일이 종료됩니다.
여기에서 app.vue를 약간 새로 고치겠습니다.
테스트 목적으로 한 글자만 변경할 수 있습니다.
왜 똑같이 보여야 하나 app.vue를 살짝 바꿔서 다시 업데이트 했습니다.
같은 이름의 js 파일로 다운로드 되는 것을 볼 수 있습니다.
이제 위에서 설명한 캐시 설정을 수행해 보겠습니다.
참고!
!
!
중요한 것은
vue.config.js 파일을 변경하면 서버의 전원을 껐다 켜야 합니다!
!
(npm 실행 제공)
# 캐시를 설정할 때
캐시를 설정하고 다시 연결하면 js 파일에 이와 같은 이상한 문자열이 추가됩니다.
차이점은 무엇입니까?
파일이 변경될 때 동일한 이름의 js 파일이 다운로드되는지 여부가 중요합니다.
– 파일이 변경되지 않고 업데이트만 된 경우,
업데이트를 했는데 js 파일에 첨부된 해시스트링이 동일한 것을 확인할 수 있습니다.
즉, 업데이트할 때마다 해시 값이 변경되지 않습니다.
– 파일 변경 후 업데이트 시
app.vue의 파일을 아주 약간 수정했습니다.
아뇨, 해시 문자열이 변경되었습니다.
따라서 파일이 수정되면 사용자는 캐시된 파일을 가져오지 않습니다.
다음과 같이 새 이름으로 js 파일을 가져옵니다.
따라서 캐시가 적용되지 않습니다.
# 추가로.. 배포용으로..
개발할 때 이렇게 지저분한 파일 이름을 보고 싶지 않아서 배포할 때만 적용합니다.
configureWebpack: (config) => {
if (process.env.NODE_ENV === "production") {
config.output.filename = "js/(name).(hash).js";
config.output.chunkFilename = "js/(name).(hash).js";
}
},