angular4 JavaScript内存溢出问题


Posted in Javascript onMarch 06, 2018

最近在写基于angular4的项目的时候,在build --prod的时候,突然措手不及的蹦出个报错,大致错误如下:

70% building modules 1345/1345 modules 0 active
<--- Last few GCs --->
ms: Mark-sweep 703.9 (837.9) -> 701.4 (811.9) MB, 331.3 / 0 ms [allocation failure] [GC in old space requested].
ms: Mark-sweep 701.4 (811.9) -> 701.4 (790.9) MB, 350.5 / 0 ms [allocation failure] [GC in old space requested].
ms: Mark-sweep 701.4 (790.9) -> 698.0 (760.9) MB, 433.7 / 0 ms [last resort gc].
ms: Mark-sweep 698.0 (760.9) -> 692.7 (751.9) MB, 328.7 / 0 ms [last resort gc].


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 00000298510373A9 <JS Object>
  1: /* anonymous */(aka /* anonymous */) [D:\dev\cobalt_wp\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:77] [pc=0000026F721B51D6] (this=0000029851004131 <undefined>,dep=00000150FC6162C9 <a NormalModule with map 0000025741730C01>)
  2: arguments adaptor frame: 3->1
  3: InnerArrayForEach(aka InnerArrayForEach) [native array.js:~924] [pc=0000026F71EE3DCD] (this=000002985100413...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

注:这里的代码并不是我的真实报错代码,编译时间太长,忘记截取了,大致的错误基本一样,如果你遇到了相同的问题,恭喜了,往下看能找到答案!

当时我是蒙圈了,一直都编译的挺好,怎么突然就溢出了呢?

可能的原因有如下:

1.angular4 在编译的时候,对CPU和内存的需求比较大,当文件数量很多的时候,可能会出现内存不足的情况(有可能);

2.当代码出现大量大数据的循环或者死循环(sever阶段并没有出现溢出,这个概率应该不大);

3.angular订阅的数据在 ngOnDestroy 阶段没有被销毁,造成大量数据占用内存(有可能)

目前没有查到具体是什么原因造成的,哪位大神知道的,请不吝赐教,谢谢!

解决这个问题的过程很波折,这里就不说了,你们估计也不想知道,下面说一下解决方案吧:

核心思路是运用v8引擎的旧属性: --max_old_space_size 来修改内存上线,至于这个属性在哪里设,就是一个磨人的小妖精了!

修改目录:  my-project/node_modules/.bin  找到 ng.cmd :

@IF EXIST "%~dp0\node.exe" (
 "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\._@angular_cli@1.0.0@@angular\cli\bin\ng" %*
) ELSE (
 @SETLOCAL
 @SET PATHEXT=%PATHEXT:;.JS;=;%
 node --max_old_space_size=8192 "%~dp0\..\._@angular_cli@1.0.0@@angular\cli\bin\ng" %*
)

修改目录: my-project/node_modules/.bin  找到 ngc.cmd :

@IF EXIST "%~dp0\node.exe" (
 "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\._@angular_compiler-cli@4.0.1@@angular\compiler-cli\src\main.js" %*
) ELSE (
 @SETLOCAL
 @SET PATHEXT=%PATHEXT:;.JS;=;%
 node --max_old_space_size=8192 "%~dp0\..\._@angular_compiler-cli@4.0.1@@angular\compiler-cli\src\main.js" %*
)

看到里面的--max_old_space_size设置了吗? 至于数字设多少,你们自己看着办吧,我的项目比较大,设个大点的值,以防不测,哈哈!

然后执行 ng build --prod ,你以为这样就行了吗?这才是关键的地方!

本人亲测,如上设置,再执行编译依然会报内存溢出,貌似并没什么卵用!把当前目录切换到 my-project/node_modules/.bin 然后再执行 ng build --prod , 世界一下子就和平了! 本人亲测有效,收好不谢!

如果你想问,为什么不加 --aot , 这个就留个你自己先想想吧!

好了,忙里抽闲,分享一下这个大坑的填坑方法, 希望对大家有用!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 #Javascript
vue中本地静态图片路径写法
Mar 06 #Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 #Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 #Javascript
React BootStrap用户体验框架快速上手
Mar 06 #Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 #Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 #Javascript
You might like
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
python爬虫常用的模块分析
2014/08/29 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python批量获取html内body内容的实例
2019/01/02 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python实现快递价格查询系统
2020/03/03 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
python如何写try语句
2020/07/14 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
关工委先进个人事迹材料
2014/05/23 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
三八节活动主持词
2015/07/04 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
基于Python实现将列表数据生成折线图
2022/03/23 Python