자바스크립트/모던 자바스크립트
모던 자바스크립트, 모듈 3 - 트리 셰이킹과 번들링
Jake Seo
2023. 3. 26. 23:27
트리 셰이킹이란?
- 모듈에서 사용되지 않는
데드 코드 제거(dead code elimination)
의 한 형태이다.- 나무를 세게 흔들면 죽은 가지만 바닥으로 떨어지는 이미지에서 용어를 차용해왔다.
- 정적 분석을 통해서 모듈에서 불러온 어떤 요소들이 현재 사용되지 않는지 알 수 있다.
- 이 사용되지 않는 코드는 추후 번들링에 의해서 사라지게 될 것이다.
동적 임포트와 트리 셰이킹
- 동적 임포트인
import()
를 한번만 사용하더라도 번들러는 트리 셰이킹을 수행하기 어려워진다.- 정적 분석이 불가능하기 때문에 런타임에서야 어떤 코드를 지워도 되는지 알 수 있기 때문이다.
번들링
- 번들링은 예전엔 구형 브라우저에도 신형 코드가 호환될 수 있도록 하는 목적으로 많이 사용했다.
- 번들링을 통해 트리 셰이킹도 가능하다.
- 번들링 과정에서 많은 JS 파일의 개수를 줄여주는데, 이는 리소스 부하를 줄이고 웹페이지의 속도를 빠르게 한다.
반응형