Estoy usando lottie web en mi front-end. Pero sigo teniendo problemas con la pérdida de memoria . Cuando elimino todas las lottie, la instancia de VM de JavaScript tiene menos de 10 MB.
Cuando habilito a Lottie, cada vez que actualizo la página o paso por otras páginas, la memoria aumenta rápidamente. De 30 MB a 80, etc. Luego, la página parece retrasada.
Encontré este problema , pero la solución no es correcta para mí porque mis animaciones no usan repetidores. De todos modos traté de hacerlo de esa manera, sin ningún resultado.
Puedes ver toda la web de la prueba aquí .
NOTA : estoy usando vue y mi componente personalizado para animaciones de lottie
<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, // This is where my animations come from. }); }, props: { /* my props */ } }También traté de poner la animación a través de la importación:
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, // Without deep copy animationData: animation, // With deep copy //animationData: JSON.parse(JSON.stringify(animation)), }); }, ...El resultado con el uso de la memoria es casi el mismo con todas las soluciones.
¿Hay alguien que sepa cómo Lottie asigna memoria y cómo evitar esas fugas de memoria?
Muchas gracias.
Experimenté el mismo problema y es posible que haya logrado resolverlo (no es un experto que monitorea la fuga de memoria, así que)
Importo dinámicamente lottie y animationData así... Y no SOLO llamo al método de destrucción como this.animation.destroy() sino TAMBIÉN this.lottie.destroy()
..., async mounted () { this.lottie = await import('lottie-web').then(module => module.default) this.animationData = await import('~/path/to/animationData.json') this.$nextTick(() => { this.animation = this.lottie.loadAnimation({ animationData : JSON.parse(JSON.stringify(this.animationData)), loop : false, autoplay : true, renderer : 'svg', container : this.$refs.heroCanvas, rendererSettings : { progressiveLoad: false, }, }) }) }, beforeDestroy () { if (this.lottie) { this.lottie.destroy() this.lottie = null } if (this.animation) { this.animation.stop() this.animation.destroy() this.animation = null } }, ...