[typescript] 타입스크립트의 트랜스파일 최적화

12 Dec 2023

typescript

타입스크립트는 자바스크립트로 변환되기 전에 트랜스파일링이라는 프로세스를 거칩니다. 이러한 과정에서 코드의 성능, 크기, 속도 등을 최적화할 수 있습니다. 이번에는 타입스크립트의 트랜스파일 최적화에 대해 알아보겠습니다.

1. tsconfig.json 설정

가장 기본적인 최적화 방법은 tsconfig.json 파일을 적절히 설정하는 것입니다. 몇 가지 중요한 옵션들을 살펴보겠습니다.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "lib": ["ES2015", "DOM"],
    "outDir": "./dist",
    "strict": true
  }
}

target: 변환될 자바스크립트의 버전을 설정합니다. 불필요한 코드를 최적화할 수 있습니다.
module: 모듈 시스템을 설정합니다. 대부분의 경우 CommonJS나 ES2015를 사용하면 됩니다.
lib: 사용할 라이브러리를 설정하여 불필요한 폴리필을 제거할 수 있습니다.
outDir: 트랜스파일된 결과물을 저장할 디렉토리를 설정합니다.
strict: 타입 검사를 엄격하게 설정하여 불필요한 타입 선언을 방지합니다.

2. Babel과의 통합

타입스크립트는 기본적으로 Babel과 통합하여 사용할 수 있습니다. Babel을 활용하여 더욱 세밀한 코드 최적화를 수행할 수 있습니다.

npm install @babel/preset-typescript babel-loader @babel/core --save-dev

그리고 babel.config.js 파일을 설정합니다.

module.exports = {
  presets: [
    "@babel/preset-typescript"
  ]
};

타입스크립트와 Babel을 통합하여 코드 최적화를 수행할 수 있습니다.

3. Tree Shaking

트리 쉐이킹은 사용되지 않는 코드를 제거하여 번들 크기를 최적화하는 기술입니다. 타입스크립트에서 모듈 시스템을 사용할 때, 웹팩 등 번들러를 통해 트리 쉐이킹을 적용할 수 있습니다.

// webpack.config.js
module.exports = {
  mode: "production",
  // ...
  optimization: {
    usedExports: true,
    minimize: true
  }
  // ...
};

트리 쉐이킹을 통해 번들 크기를 최적화하여 불필요한 코드를 제거할 수 있습니다.

4. 옵티마이저 활용

타입스크립트는 코드 최적화를 위한 옵티마이저를 활용할 수 있습니다. 예를 들어, tsconfig.json 파일에 다음과 같은 옵션을 추가하여 트랜스파일된 코드를 최적화할 수 있습니다.

{
  "compilerOptions": {
    "removeComments": true,
    "removeConsole": true,
    "noEmitOnError": true
  }
}

위와 같은 옵션을 추가하여 주석을 제거하고 콘솔 로그를 제거하는 등의 최적화를 수행할 수 있습니다.

마무리

타입스크립트의 트랜스파일 최적화를 위해 tsconfig.json 설정, Babel과의 통합, 트리 쉐이킹, 옵티마이저 활용 등 다양한 방법을 활용할 수 있습니다. 이러한 최적화 작업을 통해 코드의 성능과 품질을 향상시킬 수 있습니다.