美文网首页
【前端之日常工作】vue 内存泄漏

【前端之日常工作】vue 内存泄漏

作者: 北极星丶超帅的 | 来源:发表于2019-05-05 11:13 被阅读0次

在Node中通过JavaScript使用内存时只能使用部分内存(64位系统:1.4 GB,32位系统:0.7 GB),这个时候,如果前端项目非常的庞大,Webpack编译时就会占用很多的系统资源,如果超出了V8引擎对Node默认的内存限制大小时,就会产生内存泄露(JavaScript heap out of memory)的错误

ineffective mark-compacts neer heap limit

报错截图

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

产生的常见原因

  1. 全局变量引起的内存泄漏
  2. 闭包引起的内存泄漏
  3. dom清空或删除时,事件未清除导致的内存泄漏
  4. 被遗忘的计时器或回调函数

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

调试方法

打开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

相关文章

  • 【前端之日常工作】vue 内存泄漏

    在Node中通过JavaScript使用内存时只能使用部分内存(64位系统:1.4 GB,32位系统:0.7 GB...

  • 前端vue项目内存泄漏排查总结

    前端vue项目内存泄漏排查总结 未完待续。。。 背景 项目由vue-element-admin改造,二次封装了el...

  • 前端内存泄漏

    什么是内存泄漏? 程序的运行需要内存。只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。 对于...

  • 前端内存泄漏之形成番

    前几天我们的项目临上线出现了让人措手不及的Bug,特么的内存泄漏了。在一顿猛如虎的操作之后终于将这只小蛔虫...

  • 前端内存泄漏之回收番

    写着写着前端浏览器的内存泄漏,我竟然被百度琳琅满目的博文给带跑偏了,竟然又追看了各种语言的垃圾回收机制。发...

  • android内存泄露

    参考内存泄露从入门到精通三部曲之基础知识篇Android 内存泄漏总结Android内存泄漏研究Android内存...

  • 【Android测试】内存泄漏检测 LeakCanary

    什么是内存泄漏和内存溢出?内存泄漏有什么危害?LeakCanary检测内存泄漏? 内存泄漏(Memory Leak...

  • 前端常见内存泄漏

    内存泄漏 系统进程不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。当内存占用越来越高,轻则...

  • 为何每次用完ThreadLocal都要调用remove()?

    什么是内存泄漏 Key 的泄漏 Value 的泄漏 如何避免内存泄露 什么是内存泄漏 内存泄漏指的是,当某一个对象...

  • Android如何打造高质量的应用?( 三)

    内存泄漏内存泄漏简单来说就是没有回收不再使用的内存,排查和解决内存泄漏也是内存优化无法避开的工作之一。很多内存泄漏...

网友评论

      本文标题:【前端之日常工作】vue 内存泄漏

      本文链接:https://www.haomeiwen.com/subject/vyrcoqtx.html