모던 자바스크립트, 모듈 3 - 트리 셰이킹과 번들링

트리 셰이킹이란?

• 모듈에서 사용되지 않는 데드 코드 제거(dead code elimination) 의 한 형태이다.
  • 나무를 세게 흔들면 죽은 가지만 바닥으로 떨어지는 이미지에서 용어를 차용해왔다.
• 정적 분석을 통해서 모듈에서 불러온 어떤 요소들이 현재 사용되지 않는지 알 수 있다.
• 이 사용되지 않는 코드는 추후 번들링에 의해서 사라지게 될 것이다.

동적 임포트와 트리 셰이킹

• 동적 임포트인 import() 를 한번만 사용하더라도 번들러는 트리 셰이킹을 수행하기 어려워진다.
  • 정적 분석이 불가능하기 때문에 런타임에서야 어떤 코드를 지워도 되는지 알 수 있기 때문이다.

번들링

• 번들링은 예전엔 구형 브라우저에도 신형 코드가 호환될 수 있도록 하는 목적으로 많이 사용했다.
• 번들링을 통해 트리 셰이킹도 가능하다.
• 번들링 과정에서 많은 JS 파일의 개수를 줄여주는데, 이는 리소스 부하를 줄이고 웹페이지의 속도를 빠르게 한다.