웹팩(Webpack)은 모듈 번들러로, 프로젝트의 JavaScript 파일 및 해당 종속 항목들을 하나 또는 여러 개의 번들로 패키징 할 수 있습니다. 이 문서에서는 웹팩으로 타입스크립트(TypeScript) 파일을 번들링하고, 성능 분석 도구로 분석하는 방법을 알아보겠습니다.

웹팩으로 타입스크립트 파일 번들링하기

먼저, 타입스크립트와 웹팩을 프로젝트에 설치합니다.

npm install typescript webpack webpack-cli --save-dev

다음으로, 타입스크립트용 로더를 설치합니다.

npm install ts-loader --save-dev

프로젝트 루트에 tsconfig.json 파일을 생성하고, 필요한 타입스크립트 옵션을 설정합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist"
  }
}

웹팩 구성 파일(webpack.config.js)을 만들고, 타입스크립트 파일을 빌드하도록 설정합니다.

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

이제, 웹팩을 실행하여 타입스크립트 파일을 번들링할 수 있습니다.

npx webpack

성능 분석 도구로 번들된 파일 분석하기

웹팩 번들링 결과물을 분석하여 성능 향상을 위한 최적화 작업을 수행할 수 있습니다. 여러 도구들이 있지만, 그 중 웹팩 번들 사이즈를 시각적으로 보여주는 webpack-bundle-analyzer를 사용해보겠습니다.

먼저, 해당 도구를 설치합니다.

npm install webpack-bundle-analyzer --save-dev

웹팩 구성 파일에 플러그인을 추가하여 번들 사이즈 분석 도구를 실행할 수 있도록 설정합니다.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... (이전 설정과 병합)
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

이제 다시 웹팩을 실행하면, 번들된 파일의 크기 및 구성 등을 시각적으로 확인할 수 있습니다.

이렇게 함으로써, 웹팩으로 타입스크립트 파일을 번들링하고, 번들된 파일을 성능 분석 도구를 통해 분석하는 방법을 살펴보았습니다.

참고 자료

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