빌드 성능 — incremental·project references

TS 빌드는 프로젝트가 커질수록 느려집니다 — 100개 파일이면 모르겠지만 10,000개면 변경 한 번에 30초씩 걸려요. 19편은 빌드 시간을 줄이는 4가지 도구 — incremental, composite + project references, tsc --build, 그리고 esbuild/swc 같은 대체 도구.

① incremental — 캐시로 재컴파일 줄이기

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": ".tsbuildinfo"   // 캐시 파일 위치
  }
}

tsc 가 마지막 빌드 정보를 .tsbuildinfo 에 저장. 다음 빌드는 변경된 파일만 재컴파일. 거의 항상 켜야 하는 옵션.

② composite — 다른 프로젝트가 참조할 수 있게

// packages/core/tsconfig.json
{
  "compilerOptions": {
    "composite": true,        // 다른 곳에서 참조 가능
    "declaration": true,      // .d.ts 생성
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src"]
}

③ project references — 모노레포

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

// packages/web/tsconfig.json (core 의존)
{
  "compilerOptions": { ... },
  "references": [
    { "path": "../core" }
  ]
}

# 전체 빌드 — 변경된 프로젝트만 재빌드
tsc --build

# 정리
tsc --build --clean

# 강제 전체
tsc --build --force

# watch 모드
tsc --build --watch

④ esbuild·swc — TS 컴파일러를 우회

# tsc 가 느린 이유 — TS 가 풀 타입 체크를 함
# esbuild 와 swc 는 타입 체크 안 하고 변환만 (수십 배 빠름)

npm install -D esbuild
npx esbuild app.ts --bundle --outfile=dist.js
# 1만 줄 0.05초

# swc (vite, next.js 등이 내장)
npm install -D @swc/core
npx swc src -d dist

실전 — package.json 스크립트

{
  "scripts": {
    "dev": "vite",                              // dev (esbuild 기반)
    "build": "vite build",                       // prod (rollup + esbuild)
    "typecheck": "tsc --noEmit",                 // 타입만 검사
    "build:full": "npm run typecheck && npm run build"
  }
}

큰 코드베이스 — 점진 최적화 가이드

tsconfig 빌드 옵션 한 줄 정리

{
  "compilerOptions": {
    "incremental": true,           // 캐시 (거의 항상)
    "skipLibCheck": true,          // node_modules .d.ts 건너뜀
    "isolatedModules": true,       // 파일별 변환 도구 호환
    "composite": true,             // 다른 프로젝트가 참조 가능 (필요시)
    "declaration": true,           // .d.ts 생성 (composite 면 필수)
    "declarationMap": true,        // 디버깅 — Go to definition
    "sourceMap": true              // 런타임 디버깅용
  }
}

측정 — 어디가 느린지

# 진단 모드
tsc --extendedDiagnostics
# Output:
# Files:                         123
# Lines of Library:           42385
# Lines of Definitions:        9824
# Nodes of Library:           93892
# Types:                       1234
# Memory used:                182MB
# Total time:                  3.21s
#   Parse time:               0.45s
#   Bind time:                0.20s
#   Check time:               2.10s  ← 타입 체크가 대부분
#   Emit time:                0.41s

# 추적
tsc --generateTrace ./trace
# Chrome DevTools 의 Performance 탭에 trace.json 드래그