详解基于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 相关文章推荐
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
javascript运动详解
Jul 06 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
微信小程序转发事件实现解析
Oct 22 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
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
Add Formatted Text to a Word Document
2007/06/15 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
使用Python & Flask 实现RESTful Web API的实例
2017/09/19 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
优秀村官事迹材料
2014/01/10 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
2014年两会学习心得体会
2014/03/10 职场文书