Mengoptimalkan Lottie di React: Mengurangi Ukuran Bundel & Konsumsi CPU
Temukan cara mengoptimalkan animasi Lottie di aplikasi React, mengurangi dampak bundel JavaScript, dan memigrasikan JSON statis ke mesin status ExodeUI interaktif.
Pengambilan Inti
Menjalankan Lottie di React menggunakan lottie-web atau lottie-react berarti memuat pemutar yang mem-parsing animasi JSON dan merendernya bingkai demi bingkai. Untuk animasi dekoratif kecil, CSS polos seringkali lebih ringan; untuk yang interaktif, runtime berbasis negara seperti ExodeUI atau Rive mungkin lebih cocok. Ukur ukuran bundel dan CPU sebelum dan sesudah perubahan apa pun.
Dampak Vital Web Inti dari Lottie
Animasi Lottie sering kali memicu regresi Total Blocking Time (TBT) dan Largest Contentful Paint (LCP) saat dijalankan selama pemuatan halaman awal. Karena Lottie mengevaluasi transformasi matriks pada setiap frame di JavaScript, perangkat seluler berdaya rendah mengalami pengurasan baterai dan penurunan frame secara signifikan.
Cuplikan Implementasi Produksi
// 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; } }
*/