Skip to content

feat(zts-bundler): HMR breakdown 멀티라인 + graph/emit sub-phase 출력#65

Merged
ohah merged 1 commit into
mainfrom
feat/hmr-profile-sub-phase-log
Apr 22, 2026
Merged

feat(zts-bundler): HMR breakdown 멀티라인 + graph/emit sub-phase 출력#65
ohah merged 1 commit into
mainfrom
feat/hmr-profile-sub-phase-log

Conversation

@ohah
Copy link
Copy Markdown
Owner

@ohah ohah commented Apr 22, 2026

요약

ZTS #1724 에서 phaseDurations 에 graph/emit 내부 sub-phase 7개가 추가됨. bungae 쪽 HMR breakdown 로그도 이를 반영해 멀티라인 트리 포맷으로 확장.

로그 예시

Rebuilt [ios] (188ms) [detect=27ms graph=65ms link=6ms shake=0ms emit=74ms delta=1ms reparsed=1]
    ├─ pipeline  scan=0.6ms parse=1.2ms resolve=0.8ms semantic=0.2ms transform=1.3ms codegen=0.1ms metadata=0.05ms
    ├─ graph     build=64.5ms worker=0ms
    └─ emit      polyfill=0.6ms refresh=0ms output=73ms metafile=0ms css=4.3ms
  • BUNGAE_HMR_PROFILE=1 만 있으면: 한 줄 [...] (기본 phase 만)
  • ZTS_PROFILE=<cat> 도 있으면: sub-phase 가 하나라도 있으면 트리 구조 3 그룹 (pipeline / graph / emit) 추가 표시

start:bungae:debug script

examples/ExampleApp/package.json 에 shortcut 추가:

"start:bungae:debug": "BUNGAE_HMR_PROFILE=1 ZTS_PROFILE=all ZTS_PROFILE_LEVEL=detailed bungae serve"

이제 npm run start:bungae:debug 하나로 모든 sub-phase 측정 활성화된 dev server 시작.

실측 결과 (bungae App.tsx)

Cold rebuild #1 (277ms)

[detect=26 graph=149 link=6 shake=0 emit=75 delta=1 reparsed=1]
├─ pipeline  scan=0.4 parse=0.8 resolve=85 semantic=0.1 transform=60 codegen=0.2 metadata=1.7
├─ graph     build=149 worker=0        ← cold: resolve 85ms 포함
└─ emit      polyfill=0.6 refresh=0 output=74 metafile=0 css=4.3

Warm rebuild #2 (188ms)

[detect=27 graph=65 link=6 shake=0 emit=74 delta=1 reparsed=1]
├─ pipeline  scan=0.6 parse=1.2 resolve=0.8 semantic=0.2 transform=1.3 codegen=0.1 metadata=0.05
├─ graph     build=64.5 worker=0
└─ emit      polyfill=0.6 refresh=0 output=73 metafile=0 css=4.3

새 발견

  1. graphBuild=64.5ms ≈ graph(65ms) 거의 전부 — bundler 수준 분해의 한계. graph.zig 내부로 들어가야 (module discovery / edge resolve / cache compare 등) 추가 breakdown 가능
  2. emitOutput=73ms ≈ emit(74ms) 거의 전부 — emitter.zig 의 emitWithTreeShaking 내부 분해 필요 (prelude / concat / sourcemap)
  3. emitCss=4.3ms — 의외. ExampleApp 에 CSS 입력 있음
  4. resolve cold 85ms → warm 0.8ms — resolve_cache 효과 압도적

변경

파일 내용
server/index.ts breakdown 멀티라인 + 3 group 트리
examples/ExampleApp/package.json start:bungae:debug shortcut
zts submodule ZTS #1724 머지까지 업데이트

테스트 Plan

  • bun run typecheck 통과
  • bun run build 통과
  • 실측으로 출력 포맷 확인 (cold + warm)
  • CI

후속 작업 (별도 ZTS PR)

  • graph.zig 내부 sub-phase — graphBuild 64ms 분해
  • emitter.zig 내부 sub-phase — emitOutput 73ms 분해 (이전 PR 에서 제거한 emitPrelude/emitConcat/emitSourcemapFinalize 실제 삽입)

🤖 Generated with Claude Code

ZTS #1724 에서 graph/emit 내부 sub-phase 7개 (graphBuild, graphWorker,
emitPolyfill, emitRefresh, emitOutput, emitMetafile, emitCss) 가 추가됨.
`server/index.ts` 의 HMR breakdown 로그도 이를 반영.

## 로그 포맷 변경

sub-phase 값이 하나라도 있으면 멀티라인 트리 포맷으로 확장:

```
Rebuilt [ios] (188ms) [detect=27ms graph=65ms link=6ms shake=0ms emit=74ms delta=1ms reparsed=1]
    ├─ pipeline  scan=0.6ms parse=1.2ms resolve=0.8ms semantic=0.2ms transform=1.3ms codegen=0.1ms metadata=0.05ms
    ├─ graph     build=64.5ms worker=0ms
    └─ emit      polyfill=0.6ms refresh=0ms output=73ms metafile=0ms css=4.3ms
```

`BUNGAE_HMR_PROFILE=1` 만 있으면 `[...]` 한 줄 (기본 phase), `ZTS_PROFILE=<cat>`
추가 활성 시 pipeline/graph/emit 세 그룹의 sub-phase 가 트리 구조로 표시.

## `start:bungae:debug` script

`examples/ExampleApp/package.json` 에 env 자동 설정된 바로가기 추가:

```json
"start:bungae:debug": "BUNGAE_HMR_PROFILE=1 ZTS_PROFILE=all ZTS_PROFILE_LEVEL=detailed bungae serve"
```

## 실측 (bungae App.tsx warm HMR)

```
Rebuilt [ios] (188ms) [detect=27 graph=65 link=6 shake=0 emit=74 delta=1 reparsed=1]
    ├─ pipeline  scan=0.6 parse=1.2 resolve=0.8 semantic=0.2 transform=1.3 codegen=0.1 metadata=0.05
    ├─ graph     build=64.5 worker=0
    └─ emit      polyfill=0.6 refresh=0 output=73 metafile=0 css=4.3
```

## 새로 발견된 병목

- **graphBuild=64.5ms** ≈ graph(65ms) 거의 전부 — bundler 수준 분해 끝.
  graph.zig 내부로 들어가야 추가 breakdown 가능 (모듈 스캔 / edge 순회 /
  cache 비교 등).
- **emitOutput=73ms** ≈ emit(74ms) 거의 전부 — emitter.emitWithTreeShaking
  내부로 들어가야 추가 breakdown 가능 (prelude / concat / sourcemap 등).
- **emitCss=4.3ms** — 의외의 발견. ExampleApp 에 CSS 입력 있음.

## 변경 파일

- `server/index.ts` — breakdown 멀티라인 + sub-phase 그룹 3개 출력
- `examples/ExampleApp/package.json` — debug script
- `zts` — submodule bump (ZTS #1724 머지 포함)

## 후속 작업 (별도 PR)

- ZTS graph.zig 내부 sub-phase (graphBuild 64ms 내부 분해)
- ZTS emitter.zig 내부 sub-phase (emitOutput 73ms 내부 — prelude/concat/sourcemap_finalize)
@ohah ohah added the enhancement New feature or request label Apr 22, 2026
@ohah ohah self-assigned this Apr 22, 2026
@ohah ohah added the enhancement New feature or request label Apr 22, 2026
@ohah ohah merged commit 6bc4375 into main Apr 22, 2026
3 of 4 checks passed
@ohah ohah deleted the feat/hmr-profile-sub-phase-log branch April 22, 2026 04:06
ohah added a commit that referenced this pull request Apr 22, 2026
## 요약

bungae #65 /simplify 후속. 3-agent 리뷰 수렴 fix 2건:

1. **SUB_KEYS 배열화** — 14-way `pd.X > 0 || ...` OR 체인을 단일 배열 +
   `.some()` 로 교체. sub-phase 스키마 변경 시 한 곳만 수정 (drift 방지)
2. **`showBreakdown` guard 를 앞으로** — `BUNGAE_HMR_PROFILE=1` 비활성 시
   14 비교 + baseLine 템플릿 할당 skip (의도 명확화)

두 수정은 `formatHmrBreakdown(event)` 헬퍼로 추출하면서 자연스럽게 같이
반영. `onRebuild` body 30줄이 한 줄 호출로 축소.

## 변경

- `formatHmrBreakdown(event)` 헬퍼 추가 — SUB_KEYS 배열 + guard clause
- 그룹별 `formatPhaseGroup(pd, label, keys)` 서브 헬퍼 — pipeline/graph/emit
  세 그룹 문자열 조립 통일
- `onRebuild` 안 기존 30줄 로직 → `const breakdown = formatHmrBreakdown(event);`

## 검증

- `bun run typecheck` 통과
- `bun run build` 통과
- 로그 출력 포맷은 bungae #65 와 동일 (refactor only)
ohah added a commit that referenced this pull request Apr 22, 2026
## 요약

bungae #65 /simplify 후속. 3-agent 리뷰 수렴 fix 2건:

1. **SUB_KEYS 배열화** — 14-way `pd.X > 0 || ...` OR 체인을 단일 배열 +
   `.some()` 로 교체. sub-phase 스키마 변경 시 한 곳만 수정 (drift 방지)
2. **`showBreakdown` guard 를 앞으로** — `BUNGAE_HMR_PROFILE=1` 비활성 시
   14 비교 + baseLine 템플릿 할당 skip (의도 명확화)

두 수정은 `formatHmrBreakdown(event)` 헬퍼로 추출하면서 자연스럽게 같이
반영. `onRebuild` body 30줄이 한 줄 호출로 축소.

## 변경

- `formatHmrBreakdown(event)` 헬퍼 추가 — SUB_KEYS 배열 + guard clause
- 그룹별 `formatPhaseGroup(pd, label, keys)` 서브 헬퍼 — pipeline/graph/emit
  세 그룹 문자열 조립 통일
- `onRebuild` 안 기존 30줄 로직 → `const breakdown = formatHmrBreakdown(event);`

## 검증

- `bun run typecheck` 통과
- `bun run build` 통과
- 로그 출력 포맷은 bungae #65 와 동일 (refactor only)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant