前段时间公司有一个基于vue的项目在运行npmrunbuild时报内存溢出。今天技术交流群的一个小伙伴也有一个基于angular的项目也出现了这个问题，于是查了一些相关资料总结一下。下面将详细介绍在编译三个前端框架时如何解决这个问题。首先看一下我模拟的报错内容的具体截图如下。里面有一句很关键，CALL_AND_RETRY_LASTAllocationfailed-JavaScriptheapoutofmemoryJavaScriptheapmemoryisinsufficient。这里说的JavaScript其实就是Node。我们都知道Node是基于V8引擎的。一般的后端开发语言中，基本内存使用是没有限制的，但是我查了相关资料发现在Node中通过JavaScript使用内存时，只能使用部分内存（大约1.4GB在64位系统中，在32位系统中大约0.7GB），这就是为什么我们在编译项目时会出现内存泄漏的原因，因为如果前端项目非常大，webpack会占用大量系统空间编译时的资源。如果超过了V8forNode的默认值电脑的内存限制大小就会出现我刚刚截图的错误，那怎么解决呢？V8仍然为我们提供了使用更多内存的选项。Node启动时可以通过--max-old-space-size或--max-new-space-size来调整内存大小的使用限制，示例如下node--max-old-space-size=1700test.js//单位是MB//ornode--max-new-space-size=1024test.js//单位是KB以上参数在V8初始化时生效，一旦生效，不能动态改变。如果遇到Node无法为JavaScript分配足够内存的情况，可以使用该方法放宽V8默认的内存限制，避免执行时多用一点内存就容易崩溃。既然您知道了解决方案，那将很容易处理。下面详细介绍三个框架下的具体操作。vue先说vue，因为vue是最简单的，因为基于vue-cli生成的工程，vue并没有在package.json中的scripts字段隐藏script命令的node命令，我们直接写提供的option参数通过上面的v8只需在脚本字段中输入节点命令即可。例子如下"build":"node--max_old_space_size=4096build/build.js"节点后面写--max_old_space_size=4096即可。我这里设置的内存大小是4G，这个具体大小可以根据自己的项目情况设置。然后重新运行npmrunbuild即可正常打包构建。下面我们来谈谈反应。首先，如果自己的react项目的开发打包环境是自己搭建的，那么解决方法和上面的vue一样。只需在节点命令后添加--max_old_space_size=4096即可。如果是基于我们继续看react-cli生成的工程。根据react-cli生成的工程，我们发现package.json中scripts字段的内容如下build","test":"react-scriptstest--env=jsdom","eject":"react-scriptseject"}这个和vue-cli不同，运行npmrunbuild时实际运行的代码是react-脚本构建。这个脚本来自哪里？我们打开项目根目录下的mode_models文件夹，我们会看到一个.bin目录。这里定义了react-scripts脚本，在.bin目录下可以找到一个名为react-scripts的文件，打开这个文件，我们发现里面有一些javascript代码，这段代码的第一行有点特殊，我们可以看到一个#!/usr/bin/envnode这样的代码行，它的意思是，使用当前电脑/usr/bin/env目录下的node来运行文件中的javascript代码。到这里我们都明白了。回到原来我们要解决的问题，我们可以把--max_old_space_size=4096这行代码写在#!/usr/bin/env节点后面，#!/usr/bin/env节点--max_old_space_size=4096，这样就好了，我们的内存溢出问题也就解决了。Angular终于开始说angular了。当然，这里说的angular是最新版的angular，不是angularjs。我们在编写Angular应用程序时，通常会使用angular-cli来构建项目。如果是自己搭建的开发编译环境，解决方法和上面的vue一样。又一样。用angular-cli生成的工程和react是一样的。cli隐藏了节点命令。package.json中scripts字段内容如下"scripts":{"ng":"ng","start":"ngserve","build":"ngbuild","test":"ngtest","lint":"nglint","e2e":"nge2e"}这里的ng命令也和react一样，定义在项目根目录的mode_models文件夹下的.bin目录下，我们可以在.bin目录下找到一个叫ng的文件。在文件第一行写入#!/usr/bin/envnode--max_old_space_size=4096，这样就可以解除v8对node的内存使用限制。参考https://book.douban.com/subje...
