The bug that excessively occupies system memory seems to indicate a memory leak issue.

[kustone]

In the Windows/Nuxt3 v11 environment, I found that the vue3-lottie component renders using SVG, and when I enable autoplay and infinite looping, the memory usage within the tab spikes to 500-2000MB, significantly occupying system memory. This seems to indicate a memory leak issue. When I stop using the vue3-lottie component, the memory usage returns to normal. This problem was not present when using the Vue2 version previously.

[kustone]

I seem to have found the root cause of the problem, which lies in the code of the lottie-web package. When using both the vue3-lottie and lottie-web libraries with SVG rendering and enabling loop looping and autoplay, the browser tab consumes around 200MB of system memory after page load, gradually increasing to 500-900MB or higher within 10 seconds. Sometimes, the browser's memory recycling mechanism doesn't work effectively, and even when it does, it only maintains around 400MB, or repeated refreshes cause memory overflow, leading to page lagging or crashing.

However, when I use the script tag to import lottie-player.js, under the same conditions mentioned above, the memory stays at around 150-200MB after page load. Then, after the browser's memory recycling mechanism triggers, it stays around 73MB, and the aforementioned bug does not occur. Below is my solution, hoping it can help everyone avoid wasting a lot of time and effort on this issue!

My project: NUXT (v3.11) + Vue3 + ArcoDesign
System environment: Windows 11, EDGE/Chrome browsers
Solution:

Stop using vue3-lottie and lottie-web (because they currently have bugs).
Online import or download and locally import: https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js
You can refer to my Nuxt component below, hoping it can help you!

<template>
  <div>
    <lottie-player ref="lottie" src="/image/lottie/4MMSzbLIE3.json" background="transparent" speed="2"
          style="width: 300px; height: 300px" direction="1" mode="normal" loop autoplay></lottie-player>
    <a-space>
      <a-button type="primary" @click="lottie.play()">播放</a-button>
      <a-button type="primary" @click="lottie.stop()">停止</a-button>
    </a-space>
  </div>
</template>

<script setup>
import "assets/js/lottie-player.js";
const lottie = ref(null);
const stop = () => {
  lottie.value.stop();
};
</script>

<style lang="less"></style>

[megasanjay]

Thanks for bringing this up. I would suggest using the browser management tool to see if you see the same results.
Just trying it on pages that have with infinite lotties showing and against the Nuxt.com homepage I see the same numbers:

[megasanjay]

It's my 404 page that has a lottie on it that I'm using to check. Actually it runs lower

[megasanjay]

@kustone Please let me know with your results

[megasanjay]

My examples page has a much higher footprint but this can be attributed to over 10 lotties being rendered all at once with varying levels on interaction on them:

[megasanjay]

For the task manager results:

Only this github issue page opened.

This github issue page + nuxt homepage

This github issue page + a page with a lottie opened.

I'm not seeing giant swings like you here

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[alessiochiffi]

I've also experienced the same issue with vue3-lottie on nuxt 3, with chrome crashing the page due to a memory leak.

[megasanjay]

@alessiochiffi Do you have a copy of the website/lottie for this. Would be something worth looking into

[alessiochiffi]

Unfortunately it's a private repo and we ended up removing the Lottie implementation from the site due to this issue. I will try to replicate and share it here as soon as I can

[github-actions]

This issue is stale because it has been open for 30 days with no activity.