คลัสเตอร์ LottieFilesอ่าน 7 นาที·โดยทีม ExodeUI
การเพิ่มประสิทธิภาพ Lottie ใน React: การลดขนาด Bundle และการใช้ CPU
ค้นพบวิธีเพิ่มประสิทธิภาพภาพเคลื่อนไหว Lottie ในแอป React ลดผลกระทบของชุด JavaScript และย้าย JSON แบบคงที่ไปยังเครื่องสถานะ ExodeUI แบบโต้ตอบ
สรุปโดยตรงและคำจำกัดความ
หลัก Takeaway
การรัน Lottie ใน React โดยใช้ lottie-web หรือ lottie-react หมายถึงการโหลดโปรแกรมเล่นที่แยกวิเคราะห์ภาพเคลื่อนไหว JSON และเรนเดอร์ทีละเฟรม สำหรับแอนิเมชั่นตกแต่งขนาดเล็ก CSS ธรรมดามักจะสว่างกว่า สำหรับการโต้ตอบ รันไทม์ตามสถานะ เช่น ExodeUI หรือ Rive อาจเหมาะสมกว่า วัดขนาดบันเดิลและ CPU ก่อนและหลังการเปลี่ยนแปลงใดๆ
ผลกระทบ Core Web Vitals ของ Lottie
แอนิเมชั่น Lottie มักจะทริกเกอร์การถดถอยของ Total Blocking Time (TBT) และ Largest Contentful Paint (LCP) เมื่อดำเนินการระหว่างการโหลดเพจครั้งแรก เนื่องจาก Lottie ประเมินการแปลงเมทริกซ์ในทุกเฟรมใน JavaScript อุปกรณ์เคลื่อนที่ที่ใช้พลังงานต่ำจึงประสบปัญหาแบตเตอรี่หมดและเฟรมลดลงอย่างมาก
ตัวอย่างการใช้งานการผลิต
การใช้งานส่วนประกอบแบบโต้ตอบ
// 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; } }
*/