我的低代码项目 - vue内存泄漏

现在做低代码项目的公司越来越多，然后做低代码的项目，除了开发出来的功能强大，交互友好外，还得加载速度快，内存占用小而稳。所以毫无意外的在我的低代码项目中还是出现了内存泄漏的问题。

刀耕火种

前期花费在低代码的设计与功能实现方面的精力确实很大：简单组件的封装、复杂组件的组装、设计器的实现、配置面板的实现、流程设计器的实现、高配置能力的列表组件的实现、大屏设计器的设计等。在低代码开发的前一年里，我们可以说是拼了老命，开发出了一个基本能用的低代码设计器，开发人员也换了一茬人，到现在基于低代码设计器完成了能够交互的项目30多个，现在回过头来整理项目质量，确实也是难为了团队的开发人员。其中内存泄漏的问题，一直没被注意，但是一旦某个组件出现内存泄漏问题，由于组件复用率高，特别是末级组件，就会导致内存消耗成倍的增长。

项目反馈

从个别项目的反馈来看，项目运行在低性能的浏览器会导致浏览器崩溃，部分用户无法接受 ，反推回来，猜测：可能是内存泄漏导致的。

验证猜测

打开浏览器内存监视器看到恐怖的阶梯式增长，并且点击垃圾回收后，也不会有明显的内存下降，这个阶梯增长的现象正是的菜单的列表页面来回切换时出现的，首先大的范围就是列表页面。

分析列表页面是有列表设计器配置出来的，列表设计器具备丰富的表格设计能力，包括合并表头，合并表体，单元格在线编辑（输入，下拉选，单选，多选等常见编辑单元）实现逻辑复杂。

整改方案

整改方案内存泄漏主要分为以下几个方面：

1. 全局搜索window下挂载的对象，并在页面销毁时，清除window下对象，虽然不是主要问题，但是主动清空，是一个良好的代码素养，例：

   beforeDestroy(){
       window.context = null
   }
   

2. eventbus如果使用过eventbus.$on等方法设置监听器，需要在组件销毁时，清除监听,例：

   beforeDestroy(){
       this.eventbus.$off('formdata')
   }
   

   

3. window.addEventListener绑定的事件要在用完后及时移除监听，否则如下图会导致许多元素因为监听事件导致页面销毁后，脱离dom后依然保留在内存中，被监听，而无法销毁， 正确做法如：

   beforeDestroy(){
       window.removeEventListener('resize', chagesize, true)
   }
   

    4. modal弹框也会造成泄漏，如：ant-design-vue 的 a-modal组件，他本身会随页面销毁一同销毁，但是modal弹窗内的业务dom会被缓存留下，很多时候使用a-modal组件的时候，如果里面有form，并且输入过值，提交后关闭，再次打开发现还会有值回显，就说明这些回显回来的值实际并未销毁，如果此时跳转去了别的页面，那a-modal里的值就是泄漏的内存，销毁不了。不妨检查自己的项目是否包含modal弹框中，包含大量业务dom的情况。

// 建议是将a-modal封装成组件
// 父级用div来包裹，并通过v-if来显示隐藏
<div v-if="showModal">  <XxxModal :showModal="showModal">
</div>

    5. 在首页的内存快照里看到了echarts对象存在，所以在页面销毁时，需销毁charts对象，例：

beforeDestroy() {
    this.chart.dispose()
    this.chartLineObj.dispose()
}

最后测试

在上述内存排查和测试后，最终效果如下图，从趋势图上看到已经是平稳起伏的线了，说明浏览器通过自身的gc（垃圾回收机制），可以自动回收无用的内存，已经不再无限增加内存了，内存优化的目的已经到达了。

思路扩展

是不是还有一些其他的问题会导致内存泄漏呢？

• app.$watch的写法。需要及时销毁；
• 善用定时器setTimeout、setInterval；
• 使用第三方库图表库的时候需要留意他们的文档是否提供销毁的api。如果有销毁对象的方法一定要选择时机调用，销毁的api，通常是用来防止内存泄漏而存在的；
• 善用vue的keepalive；

总结

内存泄漏的原因很多，掌握排查方法才是关键，以上几点在我的项目中出现的问题，希望也可以给大家一些启发。

欢迎纠偏！