Lottie optimaliseren in React: bundelgrootte en CPU-verbruik verminderen
Ontdek hoe u Lottie-animaties in React-apps kunt optimaliseren, de impact van de JavaScript-bundel kunt verminderen en statische JSON's kunt migreren naar interactieve ExodeUI-statusmachines.
Kern afhaalmaaltijd
Het uitvoeren van Lottie in React met behulp van lottie-web of lottie-react betekent het laden van een speler die de animatie JSON parseert en deze frame voor frame weergeeft. Voor kleine decoratieve animaties is gewone CSS vaak lichter; voor interactieve versies kan een op status gebaseerde runtime zoals ExodeUI of Rive beter passen. Meet de bundelgrootte en CPU voor en na elke wijziging.
De Core Web Vitals-impact van Lottie
Lottie-animaties veroorzaken vaak regressies van de Total Blocking Time (TBT) en de Largest Contentful Paint (LCP) wanneer ze worden uitgevoerd tijdens het laden van de pagina. Omdat Lottie matrixtransformaties op elk frame in JavaScript evalueert, hebben mobiele apparaten met een laag energieverbruik te kampen met een aanzienlijk batterijverbruik en framedrops.
Productie-implementatiefragment
// 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; } }
*/