Chunk란? 🧐

정의 📋

하나의 번들 파일을 효과적으로 다루기 위해 여러가지의 파일로 다시 나누는 것

번들링 🔗

번들링을 하게 될 경우, 생성되는 번들파일의 사이즈가 점점 늘어남

• 장점 : 파일의 요청수 줄어듬
• 단점 : 파일 크기가 커져 상대적으로 파일이 도착하는 시간이 지연됨 → Chunk!

종류 🔩

1. runtime chunk file

   runtime : 애플리케이션이 메모리를 할당받고 실행되는 환경

• 역할

  • 런타임때 사용되는 코드들만 chunk로 분류, 나머지 내용은 모듈들에 대한 내용들만 남김
    → 실제로 계속 변하는 코드를 담고있는 파일의 크기는 상대적으로 감소
    → 런타임 코드는 변함이 없기 때문에 캐시가 적용돼서 어플리케이션이 조금 더 빠르게 동작할 수 있게됨

• 생성 과정
  1. 모듈들을 해석해서 의존성 그래프를 완성
  2. 하나의 번들 파일을 완성

  • 번들 파일을 통해 어플리케이션을 실행시킬 때 모듈들을 순서대로 읽을수 있도록 마련된 초기화에 해당하는 코드가 존재
  • 런타임 환경에서 모듈들을 안전하게 사용할 수 있도록 마련된 초기화 코드들은 모듈이 몇개가 관여되던지 변함이 없음

2. vendor chunk file

   vendor : 외부 패키지에 해당하는 모듈
   Ex. jQuery는 버전업을 해주지 않는 이상, jQuery 코드에 변화는 있을 수 없음

• 역할
  • runtime chunk와 마찬가지로 외부에서 관리되는 모듈들만 따로 분류, 작업하는 코드들만 모듈에 남김
• 장점
  • 외부 패키지들만 모은 vendor chunk 파일은 hash값이 바뀌지 않음
    → 효율 향상

Hash란? 🧐

정의 📋

파일 변경 후 빌드가 될때마다 부여되는 임의의 길이의 데이터값
(파일이 변경되고 빌드시, 웹팩에서 자동으로 값변경)

종류 🔩

Content Hash

• 컨텐츠에 따라 사용하는 해쉬 값
• 컨텐츠 종류별로 해시값을 정함

Chunk Hash

• 특정 chunk에 해당하는 해쉬 값
• chunk로 나눠진 파일들마다 해쉬 값을 부여
• content hash처럼 나눠진 chunk별로 해쉬 값을 적용
• 직접 코드를 작성하는 모듈을 제외한 나머지 chunk 파일은 영향을 주지 않음

출처 📝

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

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