[typescript] 타입스크립트와 Babel을 함께 사용하는 프로젝트에서의 성능 최적화 방법

20 Dec 2023

typescript

타입스크립트와 Babel을 함께 사용하는 프로젝트에서는 코드 번들 크기와 실행 시간을 최적화하는 것이 중요합니다. 이를 위해서 몇 가지 방법을 사용할 수 있습니다.

1. 타입스크립트 설정 최적화

타입스크립트 컴파일러의 설정을 최적화하여 코드의 번들 크기를 줄일 수 있습니다. tsconfig.json 파일에서 다음 옵션들을 고려해 보세요.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ES6",
    "strict": true,
    "removeComments": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true
  }
}

2. Babel 세팅

Babel을 사용하여 ESNext 문법을 변환할 때, 필요한 플러그인만 적용하여 번들 크기를 줄일 수 있습니다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",
        "useBuiltIns": "entry"
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

3. 불필요한 코드 제거

웹팩(Webpack)의 tree-shaking 기능을 활용하여 사용되지 않는 코드를 제거합니다.

{
  "optimization": {
    "usedExports": true
  }
}

4. 코드 분할

코드 분할을 통해 초기 로딩 속도를 개선할 수 있습니다. 웹팩이나 Rollup을 활용하여 코드를 동적으로 로딩하고 사용하지 않는 코드를 제거합니다.

5. 성능 측정 및 모니터링

프로젝트의 성능을 지속적으로 모니터링하고, 최적화 작업의 효과를 측정하는 것이 중요합니다. 이를 위해 Lighthouse나 웹사이트의 실제 성능을 측정하는 도구들을 활용해 보세요.

이러한 방법들을 적용하여, 타입스크립트와 Babel을 함께 사용하는 프로젝트의 성능을 향상시킬 수 있습니다.

참고 자료:

“TypeScript 컴파일 옵션” TypeScript Handbook
“Babel Plugins” Babel Official Documentation
“웹팩 최적화” 웹팩 공식 문서