Currently implementing lottie web on my front-end, but encountering persistent memory leaks. The JavaScript VM instance remains below 10MB when lottie is removed altogether.
However, upon enabling lottie, the memory usage escalates rapidly whenever the page is refreshed or navigated to other pages, reaching levels from 30MB to 80MB and beyond, causing significant lag.
While I came across this particular issue, the suggested solution did not apply to me as my animations do not involve repeaters. Despite attempting the recommended approach with no success.
Feel free to explore the complete test website here.
NOTE: Vue is utilized along with a custom component for lottie animations.
<template>
<div ref="animation"></div>
</template>
<script>
import lottie from 'lottie-web';
export default {
data() {
return {
hover: false,
}
},
mounted() {
lottie.loadAnimation({
container: this.$refs.animation,
renderer: this.renderer,
loop: this.loop,
autoplay: this.autoplay,
path: this.path, // Defines animation source
});
},
props: { /* defined props */ }
}
Another attempt involved importing the animation directly:
import animation from '../../../../images/web/ilu-we-create.json';
...
mounted() {
lottie.loadAnimation({
container: this.$refs.animation,
renderer: this.renderer,
loop: this.loop,
autoplay: this.autoplay,
// AnimationData without deep copy
animationData: animation,
// AnimationData with deep copy
//animationData: JSON.parse(JSON.stringify(animation)),
});
},
...
Interestingly, the memory consumption remained consistent regardless of the method used.
If anyone has insights on how lottie handles memory allocation and suggestions to eliminate these memory leaks, your assistance would be greatly appreciated.
Many thanks in advance.