Tối ưu hóa Lottie trong React: Giảm kích thước gói và mức tiêu thụ CPU
Khám phá cách tối ưu hóa hoạt ảnh Lottie trong ứng dụng React, giảm tác động của gói JavaScript và di chuyển JSON tĩnh sang các máy trạng thái ExodeUI tương tác.
Điểm chính
Chạy Lottie trong React bằng cách sử dụng lottie-web hoặc lottie-react nghĩa là tải một trình phát phân tích hoạt ảnh JSON và hiển thị nó theo từng khung hình. Đối với các hoạt ảnh trang trí nhỏ, CSS đơn giản thường nhẹ hơn; đối với những cái tương tác, thời gian chạy dựa trên trạng thái như ExodeUI hoặc Rive có thể phù hợp hơn. Đo kích thước gói và CPU trước và sau bất kỳ thay đổi nào.
Tác động quan trọng của trang web cốt lõi của Lottie
Hoạt ảnh Lottie thường xuyên kích hoạt hồi quy Tổng thời gian chặn (TBT) và Thời gian hiển thị nội dung lớn nhất (LCP) khi được thực thi trong quá trình tải trang ban đầu. Vì Lottie đánh giá các phép biến đổi ma trận trên mọi khung hình trong JavaScript, nên các thiết bị di động tiêu thụ điện năng thấp phải chịu tình trạng hao pin và giảm khung hình đáng kể.
Đoạn mã triển khai thực tế
// 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; } }
*/