vue cli 에서 파일 이름에 hash 기능을 이용해 캐쉬 제어할 수 있다.
방법
방법은 두가지가 있음
1. filenameHashing : cli.vuejs.org/config/#filenamehashing
2. Plugin 에 hash 추가 : github.com/jantimon/html-webpack-plugin#options
차이점
이 두가지의 차이점은
1번은 파일명에 hash 를 넣어서 생성한다는 점
ex) app.css -> app.[hash].css 로 생성
2번은 HTML에 css, js 끝에 hash를 넣어서 생성하기 때문에 파일은 그대로 생성된다는 점
ex) HTML 파일안에
<script src="app.css"> -> <script src="app.css?[hash]">
사용법
1번
// vue.config.js
module.exports = {
filenameHashing: true,
...
}
2번을 vue-cli 에 설정하기 위해서는 vue.config.js 에서 chainWebpack 에 옵션을 이용해야함
// vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].hash = true
return args
})
}
...
}
빌드된 파일을 커밋하여 관리할 경우 2번이 유용함
'FRONT' 카테고리의 다른 글
[웹사이트 최적화] 사용하지 않는 스크립트 코드 없애기 (0) | 2021.01.22 |
---|---|
[node] request / http 가져올때 reponse body 깨짐 오류 (0) | 2021.01.04 |