详解基于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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 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跨站刷票的实现代码
2013/06/18 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
先进个人获奖感言
2014/01/24 职场文书
文明学生事迹材料
2014/01/29 职场文书
十周年庆典策划方案
2014/06/03 职场文书
项目投资合作意向书
2014/07/29 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
欠条样本
2015/07/03 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
go xorm框架的使用
2021/05/22 Golang
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python