Optimisation de Lottie dans React : réduction de la taille du bundle et de la consommation du processeur
Découvrez comment optimiser les animations Lottie dans les applications React, réduire l'impact du bundle JavaScript et migrer les JSON statiques vers des machines à états interactives ExodeUI.
À retenir
Exécuter Lottie dans React à l'aide de lottie-web ou lottie-react signifie charger un lecteur qui analyse l'animation JSON et la restitue image par image. Pour les petites animations décoratives, le CSS simple est souvent plus léger ; pour les versions interactives, un environnement d'exécution basé sur l'état tel que ExodeUI ou Rive peut mieux convenir. Mesurez la taille du bundle et le processeur avant et après tout changement.
L'impact principal du Web Vitals de Lottie
Les animations Lottie déclenchent fréquemment des régressions du temps de blocage total (TBT) et du plus grand contenu de peinture (LCP) lorsqu'elles sont exécutées lors du chargement initial de la page. Étant donné que Lottie évalue les transformations matricielles sur chaque image dans JavaScript, les appareils mobiles à faible consommation subissent une décharge importante de la batterie et des chutes d'images.
Extrait d’implémentation en production
// 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; } }
*/