指南 · 03
效能
Web 元件的成本（以本次建置實測），以及如何重現這些數據。
測量結果
於 2026-09-28 以 Chrome 153.0.8010.52 (headless, Playwright) 測量。每個瀏覽器數據取三次執行中的最大值。
| 項目 | 測量方式 | 結果 |
|---|---|---|
| 套件大小 | 整個 Web 進入點（全部 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 commit | MotionNumber 外層 Profiler 在 10 次值變化中的 commit 次數，每次都等動畫結束 | 10 次變化中 10 次 |
| 串流 | MotionStream 顯示一次抵達的 3000 個字元期間（約 4081 ms）Profiler 的 commit 次數 | 11 |
| 中斷 | 間隔 5 ms 給 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 上沒有動畫函式庫：動態交給瀏覽器的 Web Animations API，彈簧經解析取樣。
- 不會每一格觸發 React 渲染：元件在資料改變時渲染，而不是在移動時。
- 串流文字直接附加到頁面，每秒只併入 React state 幾次。
- 每個元件都能獨立運作：沒有會重新渲染整棵樹的 Provider，也沒有全域 store。
限制
MotionStream 顯示文字時會使用動畫影格迴圈，它是唯一需要每一格工作的元件。在 React Native 上，寬度與高度的變化屬於版面配置，所以以 JS 驅動執行。測量結果只代表一台機器與一個瀏覽器，你的數據會有所不同。
重現
這些數據來自網站儲存庫中的一個指令碼。它會打包這個套件，以無視窗方式開啟已安裝的 Chrome，把每個情境各執行三次，並寫出本頁讀取的結果。
node scripts/measure-chorus.mjs