मार्गदर्शक · 03
कार्यक्षमता
वेब कंपोनंटचा खर्च, या build वर मोजलेला, आणि आकडे पुन्हा कसे मिळवायचे.
मोजमापे
2026-09-28 रोजी Chrome 153.0.8010.52 (headless, Playwright) ने मोजले. प्रत्येक ब्राउझर आकडा तीन धावांपैकी सर्वात मोठा आहे.
| काय | कसे मोजले जाते | परिणाम |
|---|---|---|
| पॅकेज आकार | संपूर्ण वेब प्रवेश (सर्व 16 export) esbuild ने bundle आणि minify केलेला, React external, gzip स्तर 9 | 28.0 KB (84.3 KB minify केलेले) |
| एक कंपोनंट | फक्त MotionNumber import केलेला, तेच bundling | 18.6 KB |
| JS frame callback | MotionNumber, MotionHeight आणि MotionHighlight एकत्र बदलत असताना (12 ॲनिमेशन चालू) 1.2 सेकंद पानावरील requestAnimationFrame कॉल | 0 |
| प्रति बदल React commit | 10 मूल्य बदलांसाठी, प्रत्येक पूर्ण होऊ देत, MotionNumber भोवती Profiler commit | 10 बदलांसाठी 10 |
| स्ट्रीमिंग | एकाच वेळी आलेली 3000 अक्षरे MotionStream उघडत असताना (सुमारे 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 Animations API कडे, विश्लेषणात्मक पद्धतीने नमुने घेतलेल्या spring सह, सोपवले जाते.
- प्रति फ्रेम React रेंडर नाही: कंपोनंट हलताना नाही, तर तुमचा डेटा बदलल्यावर रेंडर होतात.
- स्ट्रीम मजकूर थेट पानावर जोडला जातो आणि सेकंदाला फक्त काही वेळा React state मध्ये मिसळला जातो.
- प्रत्येक कंपोनंट स्वतंत्र आहे: ट्री पुन्हा रेंडर करणारा Provider किंवा जागतिक store नाही.
मर्यादा
MotionStream मजकूर उघडत असताना animation frame लूप वापरतो; प्रत्येक फ्रेमवर काम लागणारा हा एकमेव कंपोनंट आहे. React Native वर रुंदी आणि उंचीचे बदल लेआउट असल्यामुळे JS driver वर चालतात. मोजमापे एका मशीन आणि एका ब्राउझरचे वर्णन करतात, त्यामुळे तुमचे आकडे वेगळे असतील.
पुन्हा मिळवा
आकडे वेबसाइट रिपॉझिटरीतील एका script मधून येतात. तो पॅकेज bundle करतो, इन्स्टॉल केलेले Chrome विंडोशिवाय उघडतो, प्रत्येक परिस्थिती तीनदा चालवतो आणि हे पान वाचत असलेले परिणाम लिहितो.
node scripts/measure-chorus.mjs