前端佬们！塌房了！用过Element-Plus的进来~

置顶

精

活动

进来着急的前端佬，我直接抛出结论吧！

Element-plus的组件，经过测验，如下组件存在内存泄漏。如下：

• el-carousel
• el-select + el-options
• el-descriptions
• el-tag
• el-dialog
• el-notification
• el-loading
• el-result
• el-message
• el-button
• el-tabs
• el-menu
• el-popper

验证环境为：

Vue Version: 3.5.13

Element Plus Version: 2.9.7

Browser / OS: window 10 / Edge 134.0.3124.85 (正式版本) (64 位)

Build Tool: Webpack

不排查ElementUI也存在这个问题。

好了。接下来细细聊。

前因

为什么检测到这种问题？主要因为一个项目引用了Element-plus。然后，你懂的，买的人永远都会想要最好的，然后买的人就这么一顿狂点Web页面，看见内存占用飙到老高。

于是...前端佬都懂的，来活了。

技术大厂→大厂→前后端测试捞人，待遇还不错~

排查

一开始我是不敢怀疑这种高star开源组件的。总以为自己是写的代码有问题。

详细代码就不贴了，主要用ElDialog组件，封装成一个命令式的Dialog组件，避免频繁的使用v-modal参数。

然后，就直接怀疑上这个组件了。

经过测试，果不其然，从关闭到销毁，会导致内存猛增，因为Dialog中有各种表单组件，一打开就创建了一大堆的Element元素。

精确定位，使用了FinalizationRegistry类追踪创建的Dialog实体，代码如下：

const finalizerRegistry = new FinalizationRegistry((heldValue) => {
  console.log('Finalizing instance: ',heldValue);
});


// 在创建处监听
const heldValue = Symbol(`DialogCommandComponent_${Date.now()}`);
finalizerRegistry.register(this, heldValue);
console.log(`Constructed instance:`,heldValue);

发现一直没有Constructed instance销毁的信息输出。

随后，使用了Edge浏览器中的分离元素来打快照，步骤如下图。

经过反复的操作，然后点击主动垃圾回收，然后发现el-dialog的元素都会增加，基本确认无疑了。

但还是怀疑，会不会是Dialog中，引用的问题，导致元素一直没能销毁？所以，使用了纯纯的el-dialog来校验，同样的操作，既然如故。

然后的然后，我使用了如下的代码，去校验其它组件是否存在同样的问题。代码如下：