---
id: devops-build-performance
title: Build Performance — 빌드 시간 측정과 단축
category: Coding
status: draft
source_trust_level: B
verification_status: conceptual
created_at: 2026-05-09
updated_at: 2026-05-09
tags: [devops, build, performance, vite, esbuild, vibe-coding]
tech_stack: { language: "Vite / esbuild / SWC / Webpack", applicable_to: ["Web", "Backend"] }
applied_in: []
aliases: [bundler, esbuild, swc, tsc, profile]
---

# Build Performance

> "왜 느린지" 측정 안 하고 추측 최적화 = 시간 낭비. **profile → 가장 큰 단일 원인 → 도구 교체 또는 캐시**. 2026 권장: Vite (esbuild + Rollup), Turbopack (Webpack 후속), SWC, esbuild.

## 📖 핵심 개념
- Bundle: 여러 파일 → 하나/적은 수.
- Compile: TS/JSX → JS. tsc 느림, swc/esbuild 100x.
- Type check: tsc --noEmit 별도 — bundle 과 분리.
- Cache: incremental build, persistent.

## 💻 코드 패턴

### Vite 기본 (가장 빠른 dev)
```ts
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc'; // SWC 사용

export default defineConfig({
  plugins: [react()],
  build: {
    target: 'es2022',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
        },
      },
    },
  },
});
```

### TypeScript — tsc 분리
```json
// package.json
{
  "scripts": {
    "build": "vite build",                      // 빠름
    "typecheck": "tsc --noEmit",                // 별도, 병렬
    "typecheck:watch": "tsc --noEmit --watch",
    "ci": "npm run typecheck && npm run build && npm test"
  }
}
```

### tsc incremental
```json
// tsconfig.json
{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": ".tsbuildinfo"
  }
}
```

### Bundle 분석
```bash
npx vite-bundle-visualizer
# 또는
npx source-map-explorer dist/assets/*.js
```

큰 dependency 발견 → tree-shake / 동적 import / 교체.

### Profile build
```bash
NODE_OPTIONS=--cpu-prof npm run build
# .cpu-prof 파일을 Chrome devtools 에서 분석
```

### Esbuild 직접 (작은 프로젝트, 매우 빠름)
```ts
import { build } from 'esbuild';

await build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/index.js',
  platform: 'node',
  target: 'node20',
  format: 'esm',
  external: ['vscode'],
  minify: true,
});
```
대형 프로젝트도 1초.

### Cache — Turbo / Nx
```bash
turbo run build  # 변경 안 된 패키지 cache hit
```

### Parallel CI
```yaml
strategy:
  matrix:
    shard: [1/4, 2/4, 3/4, 4/4]
steps:
  - run: npm test -- --shard=${{ matrix.shard }}
```

## 🤔 의사결정 기준
| 작업 | 도구 |
|---|---|
| Web dev | Vite + SWC |
| Web prod bundle | Vite (Rollup 내장) 또는 Turbopack |
| Node.js single binary | esbuild bundle + node executable |
| TS typecheck | tsc --noEmit (별도) |
| Test runner | Vitest (Vite 호환) 또는 Jest with SWC |
| Linter | Biome (Rust, fast) 또는 ESLint + SWC |

## ❌ 안티패턴
- **build = bundle + typecheck + test 한 명령**: 한 fail 모두 다시. 분리 + 병렬.
- **tsc 로 bundle**: 느림 + tree-shake 약함.
- **dev 와 prod 다른 bundler**: 일관성 깨짐.
- **모든 의존성 단일 chunk**: 큰 first paint. manual chunks.
- **source map prod 에 inline**: 번들 크기 폭발 + 비밀 노출. external + Sentry upload.
- **node_modules cache 안 함 in CI**: 매번 npm install 1분+.
- **measure 없이 추측 최적화**: 의미 없는 변경.

## 🤖 LLM 활용 힌트
- "Vite + SWC + Vitest + Biome" 가 2026 빠른 스택.
- typecheck 는 항상 분리 / 병렬.

## 🔗 관련 문서
- [[DevOps_CI_CD_Pipeline_Patterns]]
- [[React_Code_Splitting]]