[G1-Sync] Manual knowledge update

2026-05-09 21:08:02 +09:00
parent f0befc887a
commit 93ec7e9056
363 changed files with 68333 additions and 64 deletions
@@ -0,0 +1,146 @@
+---
+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]]