Caching 이란? 🧐

정의 📋

• 사용자가 서비스를 이용하기 위해 기다리는 시간을 최소화하기 위해 사용되는 것

역할 💪

• 사용자가 필요한 리소스들의 복사본
• 서버에 요청하는 횟수 감소
  → 리소스의 내용이 변하지 않는다면 같은 내용을 서버에 요청할 필요 없음
  → 리소스 복사본을 만들어 서버보다 더 가까운 위치에 두고 이 복사본을 클라이언트가 사용할 수 있도록 함
  → 재요청을 하지 않기 때문에 서버에 요청하는 횟수 감소

장점 👍

• 서버 : 많은 요청을 짧은 시간내에 처리하는 서버의 부하를 감소시킴
• 클라이언트 : 서버보다 가까운 위치에 있는 데이터를 가져오기 때문에 사용자에게 훨씬 빨리 리소스를 전달함

종류 🔩

• Local Cache : 사용자가 서비스에 접속하는 환경에 있는 캐시
  Ex. 웹 애플리케이션 서비스를 사용하기 위해 브라우저를 이용하는 경우, 브라우저에 담긴 캐시 == 로컬 캐시

  브라우저가 캐싱을 구별하는 기준 : URL, 로드하는 리소스의 이름이 같을 경우 캐싱을 이용 → 이전 파일이 호출된 결과로 보여짐

웹팩에서 캐싱이 효과적으로 적용될 수 있게 하기 🛠

AS-IS

• 번들 파일 생성 시, 웹팩은 같은 이름으로 번들 파일을 내보냄

//src
a.js

//dist
a.js

• 파일의 이름이 같다.
  → 캐싱
  → 이전 파일의 결과 노출

TO-BE

• 웹팩에서 번들 파일에 해쉬 설정

output: {
    filename: '[name].[chunkhash].js',
},

→ 겹칠 확률이 적은 문자열을 생성해주는 **hash알고리즘**을 이용
→ 파일이 번들링될 때만 해쉬값을 변경해줌

출처 📝

• Vue.js 압축 완성 올인원 패키지 Online - 패스트캠퍼스

위의 내용은 Webpack을 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌