[typescript] Babel과 타입스크립트를 사용한 코드 스플리팅 설정 방법

20 Dec 2023

이번 포스트에서는 Babel과 타입스크립트를 사용하여 코드 스플리팅을 구성하는 방법에 대해 알아보겠습니다.

코드 스플리팅이란?

코드 스플리팅은 애플리케이션의 코드를 여러 청크로 나누는 기술로, 애플리케이션의 초기 로드 속도를 향상시키고 필요한 경우에만 해당 코드 청크를 동적으로 로드하여 성능을 최적화하는 방법입니다.

먼저, 패키지 매니저를 사용하여 Babel과 타입스크립트를 설치합니다.

npm install @babel/core @babel/preset-env @babel/preset-typescript typescript

다음으로, 프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고 다음과 같이 설정합니다.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

타입스크립트 설정 파일(tsconfig.json)에 다음과 같이 설정을 추가합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "react"
  }
}

타입스크립트와 Babel을 함께 사용하여 코드 스플리팅을 구성하려면, @babel/plugin-syntax-dynamic-import 플러그인을 설치합니다.

npm install @babel/plugin-syntax-dynamic-import

그런 다음, .babelrc 파일에 해당 플러그인을 추가합니다.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

Babel과 타입스크립트를 함께 사용하여 코드 스플리팅을 설정하는 방법에 대해 알아보았습니다. 이제 애플리케이션의 성능과 사용자 경험을 향상시키기 위해 코드 스플리팅을 적용해 보시기 바랍니다.