Files

T

Antigravity Agent 93ec7e9056 [G1-Sync] Manual knowledge update

2026-05-09 21:08:02 +09:00

3.7 KiB

Raw Blame History

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

title

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)

// 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 분리

// 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

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

Bundle 분석

npx vite-bundle-visualizer
# 또는
npx source-map-explorer dist/assets/*.js

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

Profile build

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

Esbuild 직접 (작은 프로젝트, 매우 빠름)

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

turbo run build  # 변경 안 된 패키지 cache hit

Parallel CI

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 는 항상 분리 / 병렬.

3.7 KiB Raw Blame History