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

[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-SSR (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>