해쉬값과 캐쉬 갱신
459
7 asked
'웹팩 기본편 - 자주 사용하는 로더'를 학습하고 있습니다.
로더들 중에, file-loader에 대해 학습하다가 질문이 생겼습니다.
웹팩이 .png파일을 발견하면 file-loader를 실행할 것이고, 로더가 동작하고 나면 아웃풋에 설정한 경로로 이미지 파일을 복사합니다. 그리고 파일명이 해쉬코드로 변경 됩니다.
수업시간에 강사님께서 쿼리스트링이 매번 바뀌는 해시값으로 설정된다고 하셨는데,
그러면 빌드를 할때마다 해시값이 매번 바뀌는 건가요?
그리고 이게 캐시 관점에서 어떤 도움을 주는지 궁금합니다. 파일명이 해쉬코드로 변경되는게 캐쉬 갱신을 위한 처리로 보인다고 하셨는데, 정확히 어떤점에서 캐쉬 갱신에 도움을 주는지 이해가 잘 안가서요ㅠㅠ
알려주시면 감사하겠습니다!
Answer 1
0
브라우져는 같은 uri에 대해 일정기간 캐시합니다. 예를 들어
http://domain.com/image.png 라는 파일을 요청할 때
브라우저 저장소에 이미 다운받은 자원이 있다면 요청하지 않고 캐시한 값을 사용하는 방식.
해시로 바뀐 파일명 http://domain.com/hash_1.png 도 마찬가지
문제는 빌드 후 새로운 파일을 배포했는데도 브라우져가 캐시한 값을 사용하는 경우입니다. 새로 배포한 파일을 사용해야 하는데 말이죠.
그래서 파일명을 바꿔 캐시를 무력화 시키려는 의도입니다.
신규 빌드. 파일명을 hash_2.png로 바꾸고 이 파일을 요청하는 코드도 hash_2.png로 바꿔 배포
브라우져는 http://domain.ocm/hash_2.png로 요청
신규 요청이기 때문에 캐시에 없어서 서버에 요청해 파일을 다운로드.
다음 요청부터는 캐시 값을 사용할 것임
지금 시점에서 해당 강의를 듣는 것에 대하여
1
109
3
2025년 기준 번들러 트렌드와 선택 기준이 궁금합니다 (Webpack, Vite, tsup 등)
1
220
1
에러 해결 공유드립니다
1
223
2
webpack 4 버전과 호환되는 플러그인 버전 공유드립니다
1
232
2
eslint
0
379
3
도와주세요!
0
165
2
[수강 중 트러블슈팅 공유] webpack, webpack-cli 버전
1
144
1
질문 an error occurred while loading the image
1
468
1
webpack에서 babel-loader 사용할때 질문
1
149
1
자주 사용하는 플러그인 에서 질문이 있습니다.
1
167
1
eslint no-extra-semi 관련 질문
1
142
1
webpack5 에서 open index.html하는법 + 질문
1
166
1
TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable
2
300
1
혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?
1
370
1
에러없이 png안뜨시는 분들
1
273
1
Error: Cannot find module 'node:crypto'
1
463
1
DefinePlugin 관련; env와 관련하여, (21.06.22 16:15, aloha_jh) 답변포함
1
404
1
깃허브 확인 문의
0
574
1
폴더를 prettier로 돌렸을 때 나오는 에러 구문에 대한 질문
0
404
1
Hash 에러 발생
1
2666
2
webpack.config.js에서의 CommonJS방식에 대한 질문
0
828
3
웹팩 버전
0
521
1
웹팩-cli 버전을 명시하지 않으면 왜 에러가 날까요?
0
482
1
import해오는 두가지 방법에 대해 제가 잘 이해한건지 확인받고 싶습니다!!
0
318
1