Skip to content

销毁

微前端的应用销毁一直是个麻烦的地方

默认情况下,merak只会执行钩子,并把dom放进缓存,事件也没有清除

当需要再彻底一点的清除,这个时候在卸载钩子中:

ts
import { $deactive, $onUnmount } from 'merak-helper'
$onUnmount(() => {
  // ..
  $deactive()
})
import { $deactive, $onUnmount } from 'merak-helper'
$onUnmount(() => {
  // ..
  $deactive()
})

这样会彻底清除dom以及事件

进阶

上述的经验足以应付大多数情况,但如果有进一步的需求有必要了解一下原理:

merak只会通知你挂载/卸载,并不会帮你做任何事情,

你应该手动在钩子中进行挂载、卸载的准备

merak-helper会提供连两个帮助函数:$deactive,$destroy,前者是将现有的dom转为innerHtmlwebpack在开发时style-loader就会导致问题,详见issue),

而后者则是完全删除merak实例(尽量不要使用,我个人认为它完全没有任何良性的作用)。

这两者都不一定可靠!

如果出现完全无法解决的问题,请考虑使用iframe模式,每一个应用单独享有一个iframe,卸载时iframe销毁,和无界的重建模式一致

INFO

重建模式并非是一件没有意义的事情(虽然性能确实会接近iframe

相比于使用iframe,至少有可操作的dom,弹窗等全局样式,方便的状态、方法共享,不用考虑同源...

更关键的是,很多其他工具,如可视化测试、录屏,均不支持iframe

Released the MIT License.