基于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的内存使用限制了。
转载地址:https://blog.csdn.net/qq_37146850/article/details/78770922
最新文章
- single单例模式
- BZOJ1180: [CROATIAN2009]OTOCI
- 解决 The Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path
- Delphi 使用之函数
- LeetCode Sum Root to Leaf Numbers(DFS)
- Android开发-API指南-<;permission-group>;
- Spring 的注册与注入
- python源文件转换成exe问题解决贴
- Linux下的 .o、.a、.so文件
- .net 异步编程async &; await关键字的思考
- JVM回收器与调优
- VC6的工程转到VC2010或更高版本出现fatal error C1189编译错误的解决方法
- vue使用矢量图
- os模块(二十)
- python工具 - 批量文件重命名
- Linux配置简单采集
- ERROR [main] zookeeper.RecoverableZooKeeper: ZooKeeper create failed after 4 attempts
- EhCache 配置信息
- ASP.NET 实现验证码以及刷新验证码
- socket.io对IE8的支持
热门文章
- 数据库对应的jdb连接
- 【软工】[技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE
- VUE 子组件向父组件传值 , 并且触发父组件方法(函数)
- 蒲公英 &#183; JELLY技术周刊 Vol.09 StackOverflow - 2020 开发者年度报告
- Java实现 LeetCode 832 翻转图像(位运算)
- Java 蓝桥杯 算法训练 貌似化学
- 如何获取CSDN的积分?
- Java实现 LeetCode 528 按权重随机选择(TreeMap)
- Java实现 蓝桥杯VIP 基础练习 芯片测试
- Java实现 LeetCode 292 Nim游戏