이 글에서는 타입스크립트 프로젝트에서 모듈 번들링과 코드 분할을 하는 방법에 대해 알아보겠습니다.

모듈 번들러와 코드 분할

타입스크립트로 작성된 프로젝트는 여러 파일로 구성될 수 있습니다. 이러한 파일들은 종종 하나의 파일로 번들링되어 프로덕션 환경에서 사용됩니다. 모듈 번들러는 이러한 파일들을 번들링하여 하나의 파일로 만들어주는 도구입니다. 코드 분할은 번들링된 파일을 더 작은 조각들로 분할하여 성능을 최적화하는 방법입니다.

웹팩(Webpack)을 사용한 모듈 번들링

가장 널리 사용되는 모듈 번들러 중 하나인 웹팩은 타입스크립트 프로젝트의 번들링을 지원합니다. webpack과 webpack-cli를 설치한 후, webpack.config.js 파일을 생성하여 타입스크립트 파일을 번들링할 수 있습니다.

// webpack.config.js

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

이후에 npm run build 명령어를 통해 번들링된 파일을 생성할 수 있습니다.

코드 분할

코드 분할을 위해 웹팩은 import 문을 기준으로 코드를 분할할 수 있는 도구를 제공합니다. 이를 통해 사용자가 필요로 하는 코드만 로드하여 성능을 최적화할 수 있습니다.

// src/index.ts

import('./moduleA').then(moduleA => {
  // Use moduleA here
});

import('./moduleB').then(moduleB => {
  // Use moduleB here
});

위의 예시에서 import 문을 통해 moduleA와 moduleB가 필요할 때 로드될 수 있도록 코드가 분할됩니다.

마치며

타입스크립트 프로젝트에서 모듈 번들링과 코드 분할은 효과적인 성능 최적화를 위해 중요한 단계입니다. 웹팩을 사용하여 모듈 번들링을 하고 코드 분할을 통해 필요한 코드만 로드하여 성능을 향상시킬 수 있습니다.

참고 자료

• 웹팩 공식 문서
• 타입스크립트 공식 문서