TypeScript 성능 최적화 가이드: 번들 크기와 컴파일 속도 개선 방법

// 최적화 전 코드 (문제점이 많음)
import * as lodash from 'lodash';  // ❌ 전체 라이브러리 임포트
import { Component } from 'react';
import { SomeUtility } from './utils/index';

// 복잡한 타입 정의로 컴파일 시간 증가
type ComplexType<T> = T extends any ?
  T extends string ? string :
  T extends number ? number :
  T extends boolean ? boolean : never;

class ExpensiveComponent extends Component {
  // any 타입으로 인한 타입 체크 무력화
  private data: any = {};

  render() {
    // 불필요한 라이브러리 함수 사용
    return lodash.map(this.data, (item) => item);
  }
}

{
  "compilerOptions": {
    // 컴파일 속도 향상 옵션들
    "incremental": true,           // 증분 컴파일 활성화
    "tsBuildInfoFile": ".tsbuildinfo", // 빌드 정보 캐시 파일

    // 타입 체크 최적화
    "skipLibCheck": true,          // 라이브러리 타입 체크 건너뛰기 (⚡ 큰 성능 향상)
    "skipDefaultLibCheck": true,   // 기본 라이브러리 체크 건너뛰기

    // 모듈 해결 최적화
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,

    // 출력 최적화
    "declaration": false,          // .d.ts 파일 생성 비활성화 (개발 중)
    "declarationMap": false,       // .d.ts.map 파일 생성 비활성화
    "sourceMap": true,            // 개발 중에만 소스맵 활성화

    // 타겟 및 모듈 최적화
    "target": "ES2020",           // 최신 JS 기능 활용으로 더 효율적인 코드
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],

    // 타입 체크 강도 조절 (개발 vs 프로덕션)
    "noUnusedLocals": false,      // 개발 중에는 비활성화
    "noUnusedParameters": false,  // 개발 중에는 비활성화
    "exactOptionalPropertyTypes": false  // 성능을 위해 비활성화
  },

  // 컴파일 대상 최적화
  "include": [
    "src/**/*",
    "types/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build",
    "**/*.test.ts",    // 테스트 파일 제외 (개발 모드)
    "**/*.spec.ts"
  ]
}

// 루트 tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/ui" },
    { "path": "./packages/utils" }
  ]
}

// packages/core/tsconfig.json
{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "composite": true,        // 프로젝트 레퍼런스 활성화
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "references": [
    { "path": "../utils" }    // 의존성 명시
  ]
}

// tsconfig.dev.json - 개발 전용 설정
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    // 개발 중 성능 최적화
    "incremental": true,
    "tsBuildInfoFile": "./.tsbuildinfo",

    // 타입 체크 완화
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noImplicitReturns": false,

    // 빠른 타입 체크
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,

    // 소스맵 최적화
    "sourceMap": true,
    "inlineSourceMap": false,
    "inlineSources": false,

    // 출력 최소화
    "declaration": false,
    "declarationMap": false,
    "removeComments": true
  },

  // 불필요한 파일 제외
  "exclude": [
    "**/*.test.ts",
    "**/*.spec.ts",
    "**/*.stories.ts",
    "dist/**/*",
    "build/**/*"
  ]
}

// package.json scripts
{
  "scripts": {
    "dev": "tsc --project tsconfig.dev.json --watch",
    "build": "tsc --project tsconfig.prod.json",
    "type-check": "tsc --noEmit"
  }
}

// webpack.config.js
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  mode: 'development',

  // 진입점 최적화
  entry: {
    main: './src/index.ts'
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'esbuild-loader',  // ⚡ TypeScript 컴파일러보다 10-20배 빠름
            options: {
              loader: 'tsx',
              target: 'es2020',
              tsconfigRaw: {
                compilerOptions: {
                  jsx: 'react-jsx'
                }
              }
            }
          }
        ]
      }
    ]
  },

  plugins: [
    // 타입 체크를 별도 프로세스에서 실행
    new ForkTsCheckerWebpackPlugin({
      typescript: {
        configFile: path.resolve(__dirname, 'tsconfig.json'),
        profile: true,  // 성능 프로파일링
        memoryLimit: 4096
      },
      eslint: {
        files: './src/**/*.{ts,tsx,js,jsx}'
      }
    })
  ],

  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx'],
    // 모듈 해결 최적화
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils')
    }
  },

  // 개발 서버 최적화
  devServer: {
    hot: true,
    liveReload: false,  // HMR만 사용
    watchOptions: {
      ignored: /node_modules/,
      poll: false
    }
  }
};

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';  // SWC 컴파일러 사용
import { resolve } from 'path';

export default defineConfig({
  plugins: [
    react({
      // SWC 최적화 옵션
      tsDecorators: true,
      plugins: [
        ['@swc/plugin-styled-components', {
          displayName: true,
          ssr: false
        }]
      ]
    })
  ],

  // TypeScript 관련 최적화
  esbuild: {
    target: 'es2020',
    logOverride: {
      'this-is-undefined-in-esm': 'silent'
    }
  },

  // 의존성 최적화
  optimizeDeps: {
    include: ['react', 'react-dom'],  // 사전 번들링할 의존성
    exclude: ['@my-lib']  // 번들링하지 않을 의존성
  },

  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      '@components': resolve(__dirname, './src/components'),
      '@utils': resolve(__dirname, './src/utils')
    }
  },

  build: {
    target: 'es2020',
    minify: 'esbuild',  // esbuild로 minify (Terser보다 빠름)

    // 청크 분할 최적화
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@my-ui/components']
        }
      }
    },

    // 소스맵 설정
    sourcemap: process.env.NODE_ENV === 'development'
  }
});

// ❌ 잘못된 import - 전체 라이브러리 포함
import * as lodash from 'lodash';
import { Button } from '@material-ui/core';

// ✅ 올바른 import - 필요한 함수만 포함
import debounce from 'lodash/debounce';
import omit from 'lodash/omit';
import Button from '@material-ui/core/Button';

// 또는 babel-plugin-import 사용
import { debounce, omit } from 'lodash';  // 자동으로 개별 import로 변환

// ✅ 라이브러리 대안 사용
// lodash 대신 native JS 또는 경량 라이브러리
const debounce = (func: Function, delay: number) => {
  let timeoutId: ReturnType<typeof setTimeout>;
  return (...args: any[]) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(null, args), delay);
  };
};

// React 컴포넌트 지연 로딩
import { lazy, Suspense } from 'react';

// ✅ 컴포넌트 레벨 코드 스플리팅
const LazyDashboard = lazy(() => import('./components/Dashboard'));
const LazySettings = lazy(() => import('./components/Settings'));

// ✅ 라이브러리 지연 로딩
const loadChartLibrary = async () => {
  const { Chart } = await import('chart.js');  // 필요할 때만 로드
  return Chart;
};

// ✅ 유틸리티 함수 지연 로딩
const loadHeavyUtils = async () => {
  const { heavyCalculation } = await import('./utils/heavy');
  return heavyCalculation;
};

function App() {
  return (
    <Router>
      <Routes>
        <Route
          path="/dashboard"
          element={
            <Suspense fallback={<div>Loading Dashboard...</div>}>
              <LazyDashboard />
            </Suspense>
          }
        />
        <Route
          path="/settings"
          element={
            <Suspense fallback={<div>Loading Settings...</div>}>
              <LazySettings />
            </Suspense>
          }
        />
      </Routes>
    </Router>
  );
}

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
      reportFilename: 'bundle-report.html'
    })
  ]
};

// 번들 크기 최적화를 위한 TypeScript 설정
// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",        // 최신 타겟으로 더 작은 코드 생성
    "module": "ES2020",        // ES 모듈로 Tree Shaking 활성화
    "moduleResolution": "node",
    "removeComments": true,    // 주석 제거로 번들 크기 감소
    "importHelpers": true,     // tslib 사용으로 헬퍼 함수 공유

    // 불필요한 메타데이터 제거
    "experimentalDecorators": false,
    "emitDecoratorMetadata": false
  }
}

// ❌ 성능이 느린 복잡한 타입
type SlowType<T> = T extends any
  ? T extends string
    ? T extends `${infer Start}${infer End}`
      ? Start extends 'prefix'
        ? End extends `_${infer Suffix}`
          ? Suffix extends 'suffix'
            ? true
            : false
          : false
        : false
      : false
    : false
  : false;

// ✅ 최적화된 단순한 타입
type FastType<T> = T extends `prefix_${string}_suffix` ? true : false;

// ❌ 과도한 유니언 타입
type SlowUnion =
  | { type: 'A'; data: string }
  | { type: 'B'; data: number }
  | { type: 'C'; data: boolean }
  | { type: 'D'; data: object }
  | { type: 'E'; data: any[] }
  // ... 50개 이상의 유니언 멤버

// ✅ 제네릭으로 단순화
type FastAction<T extends string, D = unknown> = {
  type: T;
  data: D;
};

// 사용
type ActionA = FastAction<'A', string>;
type ActionB = FastAction<'B', number>;

// ✅ 인터페이스 - 확장에 유리하고 성능이 좋음
interface BaseUser {
  id: string;
  name: string;
  email: string;
}

interface AdminUser extends BaseUser {
  permissions: string[];
  role: 'admin';
}

interface RegularUser extends BaseUser {
  preferences: UserPreferences;
  role: 'user';
}

// ❌ 복잡한 타입 별칭 - 성능이 느림
type ComplexUser =
  & BaseUser
  & (AdminUser | RegularUser)
  & ConditionalType<SomeCondition>
  & MappedType<AnotherCondition>;

// ✅ 간단한 유니언 타입
type User = AdminUser | RegularUser;

// ✅ 효율적인 타입 가드
function isUser(obj: unknown): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'id' in obj &&
    'name' in obj &&
    'email' in obj
  );
}

// ✅ 타입 단언보다는 타입 가드 사용
function processUserData(data: unknown) {
  if (isUser(data)) {
    // 타입이 안전하게 좁혀짐
    console.log(data.name);  // ✅ 타입 안전
  }
}

// ❌ 복잡한 타입 단언 - 성능과 안전성 모두 해침
function badProcessUserData(data: unknown) {
  const user = data as User;  // ❌ 타입 안전성 없음
  console.log(user.name);     // 런타임 에러 가능성
}

// 잘못된 예시 - 타입 체크 무력화
const fetchData = async (url: string): Promise<any> => {
  return fetch(url).then(res => res.json());
};

// 올바른 예시 - 제네릭으로 타입 안전성 확보
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);
  return response.json() as T;
}

// 사용
const users = await fetchData<User[]>('/api/users');
const products = await fetchData<Product[]>('/api/products');

// 잘못된 예시 - 매번 새로운 타입 정의
interface UserResponse1 {
  id: string;
  name: string;
  email: string;
  createdAt: Date;
}

interface UserResponse2 {
  id: string;
  name: string;
  email: string;
  updatedAt: Date;
}

// 올바른 예시 - 기본 타입과 유틸리티 타입 활용
interface BaseUser {
  id: string;
  name: string;
  email: string;
}

type UserWithCreated = BaseUser & { createdAt: Date };
type UserWithUpdated = BaseUser & { updatedAt: Date };
type UserWithTimestamps = BaseUser & { createdAt: Date; updatedAt: Date };

// 잘못된 예시 - 번들 크기 증가
import * as React from 'react';
import * as lodash from 'lodash';
import { MaterialUI } from '@material-ui/core';

// 올바른 예시 - 필요한 것만 import
import React, { useState, useEffect } from 'react';
import debounce from 'lodash/debounce';
import Button from '@material-ui/core/Button';

// 더 나은 방법 - 경량 라이브러리 사용
import { debounce } from './utils/debounce';  // 자체 구현

// .swcrc
{
  "jsc": {
    "target": "es2020",
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    },
    "minify": {
      "compress": true,
      "mangle": true
    }
  },
  "module": {
    "type": "es6"
  },
  "sourceMaps": true
}

// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  minify: true,
  sourcemap: true,
  target: ['es2020'],
  format: 'esm',
  outdir: 'dist',

  // TypeScript 옵션
  tsconfig: 'tsconfig.json',

  // 외부 라이브러리 처리
  external: ['react', 'react-dom'],

  // 플러그인 설정
  plugins: [
    // CSS 처리
    {
      name: 'css',
      setup(build) {
        build.onLoad({ filter: /\.css$/ }, async (args) => {
          // CSS 처리 로직
        });
      }
    }
  ],

  // 메타 정보 수집
  metafile: true
}).then(result => {
  // 빌드 분석
  console.log(result.metafile);
});

// 빌드 성능 측정 스크립트
import { performance } from 'perf_hooks';
import { execSync } from 'child_process';
import fs from 'fs';

interface BuildMetrics {
  timestamp: string;
  compileTime: number;
  bundleSize: number;
  typeCheckTime: number;
}

async function measureBuildPerformance(): Promise<BuildMetrics> {
  const startTime = performance.now();

  // TypeScript 컴파일
  const tscStart = performance.now();
  execSync('tsc --noEmit', { stdio: 'pipe' });
  const typeCheckTime = performance.now() - tscStart;

  // 번들 빌드
  execSync('webpack --mode=production', { stdio: 'pipe' });
  const compileTime = performance.now() - startTime;

  // 번들 크기 측정
  const bundleStats = fs.statSync('dist/main.js');
  const bundleSize = bundleStats.size;

  const metrics: BuildMetrics = {
    timestamp: new Date().toISOString(),
    compileTime,
    bundleSize,
    typeCheckTime
  };

  // 메트릭 저장
  const metricsHistory = JSON.parse(
    fs.readFileSync('build-metrics.json', 'utf8') || '[]'
  );
  metricsHistory.push(metrics);
  fs.writeFileSync('build-metrics.json', JSON.stringify(metricsHistory, null, 2));

  return metrics;
}

// CI/CD에서 성능 회귀 감지
function checkPerformanceRegression(current: BuildMetrics, history: BuildMetrics[]) {
  const recent = history.slice(-5);  // 최근 5개 빌드
  const averageCompileTime = recent.reduce((sum, m) => sum + m.compileTime, 0) / recent.length;
  const averageBundleSize = recent.reduce((sum, m) => sum + m.bundleSize, 0) / recent.length;

  const compileTimeIncrease = (current.compileTime - averageCompileTime) / averageCompileTime;
  const bundleSizeIncrease = (current.bundleSize - averageBundleSize) / averageBundleSize;

  if (compileTimeIncrease > 0.2) {  // 20% 증가
    console.warn(`⚠️ 컴파일 시간이 ${(compileTimeIncrease * 100).toFixed(1)}% 증가했습니다.`);
  }

  if (bundleSizeIncrease > 0.1) {  // 10% 증가
    console.warn(`⚠️ 번들 크기가 ${(bundleSizeIncrease * 100).toFixed(1)}% 증가했습니다.`);
  }
}

// 개발 서버 성능 최적화
// webpack.dev.js
const path = require('path');

module.exports = {
  mode: 'development',

  // 캐시 설정
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  },

  // 최적화 설정
  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false
  },

  // 소스맵 최적화 (개발 중)
  devtool: 'eval-cheap-module-source-map',

  // 해결 성능 최적화
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    modules: [
      path.resolve(__dirname, 'src'),
      'node_modules'
    ],
    // 심볼릭 링크 비활성화
    symlinks: false
  },

  // 파일 시스템 캐시
  snapshot: {
    managedPaths: [path.resolve(__dirname, 'node_modules')],
    immutablePaths: [],
    buildDependencies: {
      hash: true,
      timestamp: true
    }
  }
};