React'te Lottie'i Optimize Etme: Paket Boyutunu ve CPU Tüketimini Azaltma
React uygulamalarında Lottie animasyonlarını nasıl optimize edeceğinizi, JavaScript paket etkisini nasıl azaltacağınızı ve statik JSON'leri etkileşimli ExodeUI durum makinelerine nasıl taşıyacağınızı keşfedin.
Ana nokta
Lottie'i React'te lottie-web veya lottie-react kullanarak çalıştırmak, JSON animasyonunu ayrıştıran ve onu kare kare işleyen bir oynatıcının yüklenmesi anlamına gelir. Küçük dekoratif animasyonlar için düz CSS genellikle daha hafiftir; etkileşimli olanlar için ExodeUI veya Rive gibi durum tabanlı bir çalışma zamanı daha uygun olabilir. Herhangi bir değişiklikten önce ve sonra paket boyutunu ve CPU'yu ölçün.
Lottie'in Temel Web Verileri Etkisi
Lottie animasyonları, ilk sayfa yükleme sırasında yürütüldüğünde sıklıkla Toplam Engelleme Süresi (TBT) ve En Büyük İçerikli Boyama (LCP) regresyonlarını tetikler. Lottie, JavaScript'teki her karedeki matris dönüşümlerini değerlendirdiğinden, düşük güçlü mobil cihazlar önemli ölçüde pil tüketimine ve kare düşüşlerine maruz kalır.
Üretim için uygulama örneği
// 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; } }
*/