详解基于node的前端项目编译时内存溢出问题


Posted in Javascript onAugust 01, 2017

前段时间公司有个基于vue的项目在运行npm run build的时候会报内存溢出,今天在某个技术流交群也有位小伙伴基于angular的项目也出现了这个问题,所以查了一些相关的资料总结了一下,下面会详细说明前端三大框架编译时遇到这个问题具体怎么解决。首先看我模拟出的报错内容

具体截图如下

详解基于node的前端项目编译时内存溢出问题

里面有句关键的话,CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆内存不足,这里说的 JavaScript 其实就是 Node,我们都知道 Node 是基于V8引擎,在一般的后端开发语言中,在基本的内存使用上没有什么限制,但是我去查阅了相关的资料才发现,在 Node 中通过 JavaScript 使用内存时只能使用部分内存(64位系统下约为1.4 GB,32位系统下约为0.7 GB),这就是我们编译项目时为什么会出现内存泄露了,因为前端项目如果非常的庞大,webpack 编译时就会占用很多的系统资源,如果超出了V8对 Node 默认的内存限制大小就会出现刚刚我截图的那个错误了,那怎么解决呢?V8依然提供了选项让我们使用更多的内存。Node 在启动时可以传递 --max-old-space-size 或 --max-new-space-size 来调整内存大小的使用限制,示例如下

node --max-old-space-size=1700 test.js // 单位为MB
// 或者
node --max-new-space-size=1024 test.js // 单位为KB

上述参数在V8初始化时生效,一旦生效就不能再动态改变。如果遇到 Node 无法分配足够内存给 JavaScript 的情况,可以用这个办法来放宽V8默认的内存限制,避免在执行过程中稍微多用了一些内存就轻易崩溃,既然知道了解决办法那就好办了,下面来分别详细说明三大框架下的具体操作。

Vue

先说vue,因为vue是最简单的,因为基于 vue-cli 生成的项目,vue没有把 package.json 里面 scripts 字段的脚本命令的node命令隐藏起来,我们直接把上面v8提供的选项参数直接写入scripts 字段的 node 命令后就好了,示例如下

"build": "node --max_old_space_size=4096 build/build.js"

直接在 node 后面写上 --max_old_space_size=4096 就好了,我这里设置的内存大小是4G,这个具体的大小可以根据自己的项目情况来设置就好了。然后再重新运行 npm run build 就可以正常打包构建了。

React

下面来说说 react ,首先如果自己的 react 项目的开发打包环境是自己搭建的话,那解决方法就和上面的 vue 一样,在 node 命令后面加上 --max_old_space_size=4096 就好了,如果是基于 react-cli 生成的项目那就接着看吧,基于react-cli 生成的项目我们发现package.json 里面 scripts 字段的内容如下

"scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject"
}

这个就和 vue-cli 不一样了,运行npm run build的时候跑的实际代码是 react-scripts build, 这个脚本是来源于哪里呢,我们打开项目根目录mode_modeles文件夹,会看到一个.bin的目录,react-scripts脚本就定义在这里,在.bin目录下可以找到一个叫react-scripts的文件,打开这个文件,我们发现里面就是一些javascript代码,这个代码的首行有些特殊,我们可以看到#!/usr/bin/env node一行这样的代码,它的意思就是,用当前电脑/usr/bin/env目录下的node来运行该文件里面的javascript代码,看到这里我们都明白了,回到我们最初要解决的问题,我们可以把--max_old_space_size=4096这行代码写在#!/usr/bin/env node后面,#!/usr/bin/env node --max_old_space_size=4096,这样就好了,我们的内存溢出问题也就解决了。

Angular

最后开始说 angular ,当然这里说的 angular 是 angular 的最新版本不是angularjs,写angular应用我们一般也都会用angular-cli来搭建项目,如果是自己搭建的开发编译那解决办法和上面的vue是一样的了。用angular-cli来生成的项目也和react一样,cli把node命令也隐藏起来了,package.json 里面 scripts 字段的内容如下

"scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
}

这里的ng命令也和react一样,定义在项目根目录mode_modeles文件夹下的.bin目录里面,.bin目录下我们能找到一个叫ng的文件,在该文件的首行写上#!/usr/bin/env node --max_old_space_size=4096,这样也就可以解除v8对node的内存使用限制了。

参考

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

Javascript 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
Angular.JS中的this指向详解
May 17 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 Javascript
javascript 中select框触发事件过程的分析
Aug 01 #Javascript
谈谈对vue响应式数据更新的误解
Aug 01 #Javascript
详解jquery选择器的原理
Aug 01 #jQuery
浅谈node中的exports与module.exports的关系
Aug 01 #Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 #Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 #Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 #Javascript
You might like
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
php获取linux命令结果的实例
2017/03/13 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
python爬虫常用的模块分析
2014/08/29 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
社区志愿者活动方案
2014/08/18 职场文书
普通党员对照检查材料
2014/09/24 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
社区务虚会发言材料
2014/10/20 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python