본문 바로가기
Frontend#Frontend#Bundler#Optimization조회 2

Tree Shaking란?

정의

사용되지 않는 코드를 번들에서 자동 제거하는 최적화. ES Module의 static 분석 덕에 가능.

다른 표현트리 셰이킹Tree-shaking

Tree Shaking이란?

import하지 않은 코드를 자동으로 번들에서 배제하는 기법이다. 나무를 흔들어 죽은 잎을 떨어뜨리는 이미지에서 유래.

동작 조건

  • ES Module(import/export) 사용 — CommonJS(require)는 불가
  • 사이드 이펙트 없는 코드
  • package.json"sideEffects": false 표기

실무 팁

lodash 전체 import 대신 lodash/debounce로 개별 import해야 효과. 모던 라이브러리는 대부분 ESM + 적절한 sideEffects 선언으로 기본 tree-shaking 친화.

🔗 함께 보면 좋은 용어

Frontend 전체 →