现象描述

昨天用webpack打包Vue的项目时,node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory。并且打包速度相当慢,估计项目过大了。

解决方案一:通过 package.json 中的 "build" 加大内存

/* package.json 文件 */
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "set NODE_ENV=production && node --max_old_space_size=8000 build/build.js",
"e2e": "node test/e2e/runner.js",
"test": "npm run e2e"
},
 
解决方案二:使用 increase-memory-limit 插件,增加node服务器内存限制

/* package.json 文件 */
"devDependencies": {
"increase-memory-limit": "^1.0.6",
},
/* 添加 fix-memory-limit */
"scripts": {
"fix-memory-limit": "cross-env LIMIT=8096 increase-memory-limit"
}
 
新增依赖包npm install --save-dev increase-memory-limit,或者重新 npm install 全量更新
执行npm run fix-memory-limit(只需执行一次即可)
重启项目即可
知识点扩展:

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"
}
---------------------
作者:QC班长
来源:CSDN
原文:https://blog.csdn.net/qq_35624642/article/details/81084331
版权声明:本文为博主原创文章,转载请附上博文链接!

nodejs 前端项目编译时内存溢出问题的原因及解决方案的更多相关文章

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

    解决方法: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆内存不足,这里说的 Jav ...

  2. 关于node的前端项目编译时内存溢出问题

    最近在做一个基于vue 的多页面项目  , 页面n++多,编译时发生node内存溢出问题,继而百度之,得到解答,故记录之. '如图' 只需在 package.json 里面   加上    --max ...

  3. React项目编译node内存溢出

    坑爹的node 内存溢出 react开发项目  安装一个插件依赖 ,然后就报错了 报错如下(自己的没有截图出来 这是从别人的截图---报错基本差不多) 之前因为项目大而且旧的原因  使用 过      ...

  4. 【内存溢出】Maven编译时内存溢出的问题解决方式

    原文地址:https://www.cnblogs.com/sunny3096/p/7524635.html 编译源码时报出java.lang.OutOfMemoryError: Java heap s ...

  5. 图片_ _Android有效解决加载大图片时内存溢出的问题 2

    Android有效解决加载大图片时内存溢出的问题 博客分类: Android Android游戏虚拟机算法JNI 尽量不要使用setImageBitmap或 setImageResource或 Bit ...

  6. Android开发中如何解决加载大图片时内存溢出的问题

    Android开发中如何解决加载大图片时内存溢出的问题    在Android开发过程中,我们经常会遇到加载的图片过大导致内存溢出的问题,其实类似这样的问题已经屡见不鲜了,下面将一些好的解决方案分享给 ...

  7. hive中与hbase外部表join时内存溢出(hive处理mapjoin的优化器机制)

    与hbase外部表(wizad_mdm_main)进行join出现问题: CREATE TABLE wizad_mdm_dev_lmj_edition_result as select *  from ...

  8. VS2017新建或拷贝项目编译时出现:找不到 Windows SDK 版本8.1.请安装所需的版本的 Windows SDK

    VS2017新建或拷贝项目编译时出现:找不到 Windows SDK 版本8.1.请安装所需的版本的 Windows SDK 或者在项目属性页的问题解决方案 解决方法: 右击项目解决方案, 选择:重定 ...

  9. Tomcat启动项目时内存溢出问题如何解决

    在Eclipse中,内存溢出(报不能创建JAVA虚拟机错时,也可能是这里配错了.) 1.双击Tomcat,点击Open launch configuration,Arguments, 2.在VM ar ...

随机推荐

  1. build配置项中maven常用插件

    <build> <!-- 在浏览器地址栏的项目名称 --> <finalName>${project.artifactId}</finalName> & ...

  2. docker+ubuntu14.04+cuda7.0

    参考链接: http://tleyden.github.io/blog/2014/10/25/docker-on-aws-gpu-ubuntu-14-dot-04-slash-cuda-6-dot-5 ...

  3. php生出随机字符串

    function generateRandomString($length = 10) { $characters = '0123456789abcdefghijklmnopqrstuvwxyzABC ...

  4. 通用导出excel

    循环导出所有行和列 def export_excel(table_name): host,user,passwd,db='192.168.0.12','root','myjcyf','us_sys' ...

  5. 小甲鱼Python第十九讲课后习题

    笔记: 1.内嵌函数:函数内部新创建另一个函数 2.闭包:函数式编程的重要语法,如果在一个内部函数里,对外部作用域(但不是在全局作用域的变量)进行引用,那么内部函数就会被认为是闭包. 3.nonloc ...

  6. 【Tomcat】Tomcat配置JVM参数步骤

    这里向大家描述一下如何使用Tomcat配置JVM参数,Tomcat本身不能直接在计算机上运行,需要依赖于硬件基础之上的操作系统和一个java虚拟机.您可以选择自己的需要选择不同的操作系统和对应的JDK ...

  7. linux for循环 fork() 产生子进程

    #include <sys/types.h> #include <unistd.h> #include<stdio.h> int main() { for(int ...

  8. 经过N条边的最短路

    http://acm.pku.edu.cn/JudgeOnline/problem?id=3613 求经过N条边的最短路 (2 ≤ N ≤ 1,000,000) 倍增floyd,主体是矩阵乘法.考虑一 ...

  9. PAT甲级1049 Counting Ones【规律】

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805430595731456 题意: 给定n,问0~n中,1的总个数 ...

  10. direction: rtl;

    这个属性,有点无语,费了点时间. <style type="text/css"> .hao {direction: rtl;}</style> <se ...