search

megasanjay / vue3-lottie

A simple Vue 3 component for using Lottie animations in Vue 3
https://vue3-lottie.vercel.app/
MIT License
375 stars 34 forks source link

perf: reduce the unnecessary use of `ref` #526

Closed Mini-ghost closed 7 months ago

Mini-ghost commented 8 months ago

Inside <Vue3Lottie>, animationData is used to store the JSON data passed by the user:

https://github.com/megasanjay/vue3-lottie/blob/d1c38f84f5b992107683b166ff4ab8a9b9b83b4f/packages/vue3-lottie/src/vue3-lottie.vue#L116

I checked the context, and ref seems this isn't a necessary presence. I tried making it a regular variable instead of a Vue ref, and there was a significant performance improvement.

After this PR, using dog.json as an example, it can reduce the time by about 25% (measuring the execution of loadLottie()).

vercel[bot] commented 8 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
vue3-lottie ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 17, 2024 0:43am
megasanjay commented 8 months ago

Thank you for the PR. I just need to doublecheck #502 with this change since I think they might be related.

Mini-ghost commented 8 months ago

@megasanjay Thank you for your review. 💚

I have looked into issue #502 and believe it is unrelated to this issue. I have reproduced the problem in the playground and found a solution. I will open another PR to resolve this issue as soon as possible.