🌳 Tree-shaking과 enum 사용에 대한 고민

✅ Tree-shaking이란?

Tree-shaking은 번들에서 사용되지 않는(dead code) 코드를 제거하여 최종 번들 크기를 줄이는 최적화 기법
이를 통해 페이지 로딩 속도 개선과 초기 렌더링 성능 향상에 도움을 줄 수 있습니다

 

Enum이란?

enum은 열거형 타입으로, 관련된 상수들을 하나의 그룹으로 묶어 표현할 수 있도록 도와주는 기능입니다.

• TypeScript에서 제공하는 기능이며, JavaScript에는 기본적으로 존재하지 않습니다.
• 숫자 또는 문자열 값을 지정할 수 있으며, 타입 안전성을 확보하고 코드의 가독성과 유지보수성을 높여줍니다.

// 일반적으로 사용하고 있는 유형
enum TYPE {
  KOREA = 'Korea',
  JAPAN = 'Japan'
}

// Javascript에서 사용하고 있는 예시
enum TYPE = {
  KOREA : 'Korea',
  JAPAN : 'Japan'
}

🚫 Enum과 Tree-shaking의 관계

TypeScript의 enum은 컴파일 시 JavaScript로 변환되며, 이 변환된 코드가 Tree-shaking의 영향을 받지 않는 경우가 많습니다.
따라서 사용하지 않는 enum 멤버들도 번들에 포함되어 불필요한 코드가 남을 수 있습니다.

Tree-shaking 측면에서 성능 최적화를 고려한다면 다음과 같은 우선순위로 사용을 권장합니다:

✅ Union Types > ✅ const enum > 🚫 enum

• Union Types: 가장 가볍고 타입 정보만 사용되므로 최적화에 유리
• const enum: 컴파일 시 인라인 처리되어 불필요한 코드 제거 가능 (단, 일부 환경에서는 호환성 이슈 주의)
• enum: 기본적으로 Tree-shaking 되지 않음

 

참고 문서 : https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking