Tree-shaking은 무엇인가요?
Tree-shaking이란 간단하게 말해 사용하지 않는 코드를 삭제하는 기능을 말합니다. 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 Tree-shaking이라고 부릅니다. Tree-shaking을 통해 export했지만 아무 데서도 import하지 않은 모듈이나 사용하지 않는 코드를 삭제해서 번들 크기를 줄여 페이지가 표시되는 시간을 단축할 수 있습니다.
enum은 무엇인가요?
enum은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능입니다. 임의의 숫자나 문자열을 할당할 수 있으며 하나의 유형으로 사용해서 버그를 줄일 수 있습니다.
// 아무것도 지정하지 않은 경우에는 0부터 숫자를 매깁니다.
enum MOBILE_OS {
IOS, // 0
ANDROID // 1
}
// 임의의 숫자나 문자열을 할당할 수도 있습니다
enum MOBILE_OS {
IOS = 'iOS',
ANDROID = 'Android'
}
// 아래와 같이 유형으로 사용할 수도 있습니다
const os: MOBILE_OS = MOBILE_OS.IOS
function detectOSType(userAgent: string): MOBILE_OS {
// 생략
}
enum은 TypeScript가 자체적으로 구현하는 기능입니다. JavaScript에서는 사용할 수 없기 때문에 아래와 같이 객체를 사용하는 코드를 자주 작성하게 됩니다.
const MOBILE_OS = {
IOS: 'iOS',
ANDROID: 'Android'
}
console.log(MOBILE_OS.IOS) // iOS
TypeScript에서 enum을 사용하면 Tree-shaking이 되지 않습니다
앞서 말했듯이 enum은 편리한 기능이지만 TypeScript가 자체적으로 구현했기 때문에 발생하는 문제가 있습니다. 아래와 같이 TypeScript 코드를 작성한 경우를 생각해 보겠습니다.
export enum MOBILE_OS {
IOS,
ANDROID
}
// 문자열을 할당한 경우
export enum MOBILE_OS {
IOS = 'iOS',
ANDROID = 'Android'
}
위 코드를 트랜스파일하면 아래와 같은 JavaScript 코드가 됩니다.
export var MOBILE_OS;
(function (MOBILE_OS) {
MOBILE_OS[MOBILE_OS["IOS"] = 0] = "IOS";
MOBILE_OS[MOBILE_OS["ANDROID"] = 1] = "ANDROID";
})(MOBILE_OS || (MOBILE_OS = {}));
// 문자열을 할당한 경우
export var MOBILE_OS;
(function (MOBILE_OS) {
MOBILE_OS["IOS"] = "iOS";
MOBILE_OS["ANDROID"] = "Android";
})(MOBILE_OS || (MOBILE_OS = {}));
JavaScript에 존재하지 않는 것을 구현하기 위해 TypeScript 컴파일러는 IIFE(즉시 실행 함수)를 포함한 코드를 생성합니다. 그런데 Rollup과 같은 번들러는 IIFE를 '사용하지 않는 코드'라고 판단할 수 없어서 Tree-shaking이 되지 않습니다. 결국 MOBILE_OS를 import하고 실제로는 사용하지 않더라도 최종 번들에는 포함되는 것입니다.
'JavaScript&TypeScript' 카테고리의 다른 글
TypeScript Generic 사용해보기 (0) | 2023.01.27 |
---|---|
TypeScript 미리 써보는 공식사이트 (0) | 2023.01.27 |
TypeScript 총정리 (0) | 2023.01.19 |
TypeScript Class 접근 제한자와 readonly (0) | 2023.01.18 |
TypeScript에 대해서 알아보자 (1) | 2023.01.17 |
댓글