webpack과 같은 모듈 번들러 등에서 사용되는 작은 조각으로 나뉘어진 파일
-> 이 파일들이 웹 앱을 구성 + 성능 최적화 + 로딩 속도 개선
정의
앱을 구성하는 여러 리소스를 작은 단위로 나눈 것
일반적으로 웹 앱은 하나의 큰 파일이 아닌 여러 개의 작은 파일로 구성되고 각 파일은 독립적인 기능을 가짐
-> 작은 조각으로 분할하여 필요할 때만 로드시켜 초기 로딩 시간을 최소화 + 필요한 리소스만 로드해 효율적인 앱 실행을 가능하게 함
종류
-
Entry
웹 앱의 진입점(entry point)에서 시작
의존하는 다른 모듈들을 포함하는 기본적인 청크
웹 애플리케이션이 실행될 때 로딩되는 청크
사용자가 처음 방문할 때 가장 먼저 로드 -
Split
웹 앱의 코드를 여러 개의 독립적인 청크로 나누는 과정에서 생성
코드의 중복을 줄이고 공통 모듈을 추출하여 별도의 청크로 분리해 앱의 로딩 속도를 개선 -
Dynamic
사용자가 웹 앱을 사용하면서 필요에 따라 동적으로 로드
사용자의 상호작용에 따라 추가적인 리소스를 필요로 할 때 + 미리 로드하지 않아도 되는 경우 유용 -
Vendor
웹 앱에서 외부 라이브러리와 패키지들을 분리하여 따로 묶은 청크
외부 라이브러리들을 효율적으로 캐싱하고 로드하는 데 유용
해시
번들링된 파일의 버전 관리를 위해 사용
일반적으로 모듈 번들러를 사용해 웹 앱을 빌드하면 각 청크에는 고유한 해기 값이 포함됨
해시 값은 파일의 내용이 변경되었을 때 자동 갱신 + 캐싱 문제 해결 + 새로운 버전의 파일 적용을 도움
=> 빌드마다 모든 파일에 고유 해시값이 공통적으로 부여되기 때문에 한 파일만 바뀌어도 나머지 청크들도 다 새로 불러옴
청크해시
위에서 설명한 해시의 문제점을 해결
특정 청크의 내용만을 기반으로 생성되는 해시
각 청크마다 독립적으로 생성
특정 청크의 내용이 변경되는 변경되면 해당 청크의 해시 값만 변경되고 다른 청크들의 해시 값는 영향 받지 않음
