가이드 · 03
성능
웹 컴포넌트의 비용을 이번 빌드에서 측정한 값과, 그 숫자를 다시 재는 방법.
측정값
2026-09-28에 Chrome 153.0.8010.52 (headless, Playwright)으로 측정했습니다. 브라우저 수치는 세 번 실행 중 가장 큰 값입니다.
| 항목 | 측정 방법 | 결과 |
|---|---|---|
| 패키지 크기 | 웹 진입점 전체(16개 내보내기)를 esbuild로 묶고 압축, React 제외, gzip 9단계 | 28.0 KB (압축 전 84.3 KB) |
| 컴포넌트 하나 | MotionNumber만 가져와 같은 방식으로 묶음 | 18.6 KB |
| JS 프레임 콜백 | MotionNumber·MotionHeight·MotionHighlight가 함께 바뀌는 1.2초 동안 페이지의 requestAnimationFrame 호출 수(애니메이션 12개 실행) | 0 |
| 값 변화당 React 커밋 | MotionNumber를 감싼 Profiler의 커밋 수, 값 10번 변화, 매번 끝날 때까지 대기 | 10번 변화에 10 |
| 스트리밍 | 한 번에 도착한 3000자를 MotionStream이 드러내는 동안(약 4081ms) Profiler 커밋 수 | 11 |
| 중간에 끊기 | 5ms 간격으로 새 값 200개를 넣고 기다린 뒤, 페이지에 남은 애니메이션과 최종 글자의 일치 여부 | 0개 남음, 글자 일치 |
2026-09-28 · @kkwaenggwari/animated-chorus@0.1.0 · Chrome 153.0.8010.52 (headless, Playwright) · Windows_NT 10.0.22631 · Intel(R) Core(TM) i7-14700K
빠른 이유
비용을 낮게 유지하는 설계 네 가지입니다.
- 웹에 애니메이션 라이브러리가 없습니다. 모션은 브라우저의 Web Animations API에 넘기고 스프링은 해석적으로 샘플링합니다.
- 프레임마다 React 렌더가 없습니다. 컴포넌트는 움직이는 동안이 아니라 데이터가 바뀔 때 렌더합니다.
- 스트리밍 글은 페이지에 바로 붙이고 1초에 몇 번만 React 상태에 합칩니다.
- 모든 컴포넌트가 혼자 섭니다. 트리를 다시 렌더하는 Provider도, 전역 저장소도 없습니다.
한계
MotionStream은 글을 드러내는 동안 애니메이션 프레임 루프를 씁니다. 매 프레임 작업이 필요한 유일한 컴포넌트입니다. React Native에서 너비와 높이 변화는 레이아웃이므로 JS 드라이버로 돕니다. 측정값은 한 기기와 한 브라우저의 결과이므로 여러분의 숫자는 다를 수 있습니다.
다시 재기
이 숫자는 웹사이트 저장소의 스크립트에서 나옵니다. 패키지를 묶고, 설치된 Chrome을 창 없이 열어, 모든 시나리오를 세 번씩 실행한 뒤 이 페이지가 읽는 결과를 기록합니다.
node scripts/measure-chorus.mjs