2020-09-23 vue 内存泄漏

今天遇到一个内存泄漏的问题,然后被问到为什么会有这个问题以及怎么解决,因为之前没遇到到,便在网上找了下答案,便整理下这个问题,以防下次再遇到

产生的常见原因

全局变量引起的内存泄漏

闭包引起的内存泄漏

dom清空或删除时,事件未清除导致的内存泄漏

被遗忘的计时器或回调函数

其实每次去面试的时候,都会问到闭包,但我之前只是看下闭包的作用,并没有太去了解它

调试方法

打开f12进入Memory,选中heap snapshot(堆快照),每进行一次操作就点一下左上角圆点,比较两次内存有没有回收,若有, 找到引用的这个对象,手动GC就好啦

参考:一个Vue页面的内存泄露分析

解决方法(网上推荐)

一、直接覆盖

简单粗暴,直接在package.json替换scripts下的serve指令内容:

"serve" : "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve --open"

开发时运行npm run serve或yarn serve即可。

二、优雅的覆盖

和以上的方法唯一的不同,就是不需要编写vue-cli-service包的路径,代码更优雅,也不受包地址的影响。

全局安装npx: npm i -g npx

直接在package.json替换scripts下的serve指令内容:

"serve": "npx --max_old_space_size=4096 vue-cli-service serve"

开发时运行npm run serve或yarn serve即可。

三、 设置为8G

--max_old_space_size=4096  改成  --max_old_space_size=8192

四、安装npm install -g increase-memory-limit(这个方法亲自试用并成功解决)

来自Webpack打包报"JavaScript heap out of memory"错误

因为V8引擎有对Node进行默认的内存限制大小,那么在Node内存不足的时候,可以放宽内存大小的使用限制,可以在Node启动的时候,传递–max-old-space-size或–max-new-space-size来调整内存大小的使用限制。

但是这种方式需要所有地方都要进行设置,因此需要安装一个插件increase-memory-limit。

安装

npm install -g increase-memory-limit

运行

increase-memory-limit

在package.json里修改

“scripts”: {“fix-memory-limit”: “cross-env LIMIT=2048 increase-memory-limit”},“devDependencies”: {“increase-memory-limit”: “^1.0.3”,“cross-env”: “^5.0.5”}

执行一次

npm run fix-memory-limit

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容