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

kustone commented 5 months ago

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 commented 5 months ago

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>

QQ截图20240324190737 D124D95415C116B45DC749849E1455C2