Lottie-Web 内存泄漏导致网页内存占用异常、页面卡顿、无响应、崩溃的解决方案

🤨1、前言

⚠️ 最近一次的网站开发中，为了丰富页面的动效在NUXT3（v3.11）开启SSR的情况下使用了lottie动画，引入了vue3-lottie这个包，然后在开发过程中发现浏览器内存占用大幅提高，特别是在频繁改动保存组件，页面自动刷新的时候，单标签页和devTools能高达4个多G的内存占用，从而导致页面卡顿、无响应甚至崩溃。

lottie-web（页面内容相同）

解决后（页面内容同上）

起初我以为是我存在死循环，然后逐一排查，最终找到罪魁祸首：lottie-web/vue3-lottie！！！

2、😎 首先给出解决方案

1、取消引用vue3-lottie和lottie-web（因为他们目前存在BUG）
2、在线引入或者下载后本地引入JS文件：https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js
3、您可以参考我以下的Nuxt组件，希望能帮助到您！

<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>

这个组件可以帮助你正常的显示、操作lottie动画，当然我也测试过了在NUXT3 (v3.11)开启SSR服务端渲染时，可以正常的显示没有BUG。