ant-design Modal 组件的 getClickPosition 函数缺少解绑操作导致微前端页面内存泄露

q5iwbnjs  于 3个月前  发布在  其他
关注(0)|答案(9)|浏览(70)

https://github.com/ant-design/ant-design/blob/4380c6b72dcc0efdbda1c0e600fc0fea6e9f7689/components/modal/Modal.tsx

Steps to reproduce

使用微前端框架加载子应用,如果子应用中引入了 antd 的Modal 组件,每次加载都会在 document 上新增一个事件绑定,导致内存持续增长。

// 这句代码是在 Modal 引入时全局作用域下执行的。
document.documentElement.addEventListener('click', getClickPosition, true)

What is expected?

在 window unload 时解除这个全局的事件绑定。

What is actually happening?

在 window unload 时没有解除这个全局的事件绑定。
| Environment | Info |
| ------------ | ------------ |
| antd | 5.14.1 |
| React | 16.14.0 |
| System | MacOS 13.2.1 (22D68) |
| Browser | Chrome 121.0.6167.184 |

xxls0lw8

xxls0lw81#

根据微前端实现不同,window 的 unload 事件可能并没有被代理。你们使用的微前端技术栈是什么?

hrysbysz

hrysbysz2#

根据微前端实现不同,window 的 unload 事件可能并没有被代理。你们使用的微前端技术栈是什么?

目前是 micro-app,没有代理unload的。不过是否能提供一个回调之类的配置,可以将解绑的函数暴露出来,我们在业务层也能处理。

sycxhyv7

sycxhyv73#

如果子应用使用的是同一版本的 antd,可以通过 external 来共享,这样就不会存在重复 addEventListener 的情况。
如果使用的是不同版本的 antd 可能会有其他复杂问题,可以考虑治理一下?

mu0hgdu0

mu0hgdu04#

不过是否能提供一个回调之类的配置,可以将解绑的函数暴露出来,我们在业务层也能处理。

这是一个解决方法,不过对用户来说还是有成本,如果存在必须的场景我们偏向于在 antd 中解决这个问题。

ssgvzors

ssgvzors5#

印象中 qiankun 中不会遇到这个问题。

6l7fqoea

6l7fqoea6#

印象中 qiankun 中不会遇到这个问题。

同 microapp 会有问题。func 组件 完全可以调整避免原来compdid的问题

0qx6xfy6

0qx6xfy67#

如何调整?求指导 @ourfeel

daupos2t

daupos2t8#

如何调整?求指导 @ourfeel

暴力点 事件和方法挪到 useEffect 是否可行

2hh7jdfx

2hh7jdfx9#

印象中 qiankun 中不会遇到这个问题。

qiankun 应该也有同样问题。 引入zone。 所有事件被zone代理掉了。

相关问题