Code Split이란?

모듈 번들러(ex. webpack)를 이용하여 만들어진 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것

Code Splitting이 필요한 이유

• 프로젝트의 규모가 커질 수록 bundle의 크기가 커지게 되는데, 하나의 번들 파일이 커지면 초기 로딩속도가 느려지게 됨
• 하나의 번들 파일을 여러개의 번들 파일로 나눈 뒤 필요한 번들 파일만 불러오고 나머지 번들 파일은 호출하지 않고 지연
• 불필요한 모듈은 초기에 로드되지 않아 작업량을 줄여 더 빠른 속도로 로드됨

<aside> 📌 Chunk란? 하나의 번들 파일을 효과적으로 다루기 위해 여러가지의 파일로 다시 나누는 것

• runtime chunk : 런타임때 사용되는 코드들만 chunk로 분류
• vendor chunk : 외부에서 관리되는 모듈들만 따로 chunk로 분류

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

</aside>

참고

[Webpack 알아보기] #4 - Chunk/ Hash란?

(Webpack) 웹팩5로 청크 관리 및 코드 스플리팅 하기

[10분 테코톡] 자스민, 병민의 웹팩 최적화 Part2