تحسين Lottie في React: تقليل حجم الحزمة واستهلاك وحدة المعالجة المركزية
اكتشف كيفية تحسين الرسوم المتحركة Lottie في تطبيقات React، وتقليل تأثير حزمة JavaScript، وترحيل JSON الثابتة إلى أجهزة حالة ExodeUI التفاعلية.
الوجبات الجاهزة الأساسية
تشغيل Lottie في React باستخدام شبكة لوتي أو رد فعل لوتي يعني تحميل مشغل يقوم بتوزيع الرسوم المتحركة JSON ويعرضها إطارًا تلو الآخر. بالنسبة للرسوم المتحركة المزخرفة الصغيرة، غالبًا ما يكون CSS العادي أخف وزنًا؛ بالنسبة للتفاعلية، قد يكون وقت التشغيل المستند إلى الحالة مثل ExodeUI أو Rive مناسبًا بشكل أفضل. قياس حجم الحزمة ووحدة المعالجة المركزية قبل وبعد أي تغيير.
تأثير مؤشرات الويب الأساسية لـ Lottie
تؤدي الرسوم المتحركة Lottie بشكل متكرر إلى تشغيل تراجعات إجمالي وقت الحظر (TBT) وأكبر رسم محتوى (LCP) عند تنفيذها أثناء التحميل الأولي للصفحة. نظرًا لأن Lottie تقوم بتقييم تحويلات المصفوفة في كل إطار في JavaScript، فإن الأجهزة المحمولة منخفضة الطاقة تعاني من استنزاف كبير للبطارية وانخفاض في الإطارات.
مقتطف من تنفيذ الإنتاج
// A small decorative "like" pop in plain CSS instead of a Lottie file.
// No player needed; measure your own bundle and CPU before and after.
export function LikeHeart({ active }) {
return (
<svg className={active ? 'heart heart--active' : 'heart'} viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 21s-7-4.4-9.3-8.6C1 9.2 3 5.5 6.6 5.5c2 0 3.4 1.1 4.4 2.5 1-1.4 2.4-2.5 4.4-2.5 3.6 0 5.6 3.7 3.9 6.9C19 16.6 12 21 12 21z" />
</svg>
);
}
/* CSS
.heart { fill: #ccc; transition: fill 150ms; }
.heart--active { fill: #ff4a1c; animation: pop 320ms cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .heart--active { animation: none; } }
*/