Vue JavaScript heap out of memory

1、问题

• JavaScript heap out of memory

前端项目，随着项目文件越来越多，打包和编辑的时间也越来越长，编辑时占用的内存也随之增多。长此以往，会出现JavaScript heap out of memory，导致编译失败。

2 问题产生的原因

JavaScript 内存不足，原因在于 Node 中通过script使用的内存只是很小的一部分(64位系统下约为1.4 GB，32位系统下约为0.7 GB)，这个时候，如果前端项目非常的庞大，Webpack编译时就会占用很多的系统资源，如果超出了V8引擎对Node默认的内存限制大小时，就会产生内存泄露(JavaScript heap out of memory)的错误。
通过上面的分析，可以看出解决方式也无非两类，一是优化文件打包的体积，二是扩大编译时的内存。

3、解决方案

3.1 通过increase-memory-limit插件修改内存

• 安装两个npm包 ： increase-memory-limit 和cross-env

npm install -save increase-memory-limit,cross-env

• 在package.json中，增加scriptes脚本

  "scripts": {
    
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",   
    "fix-memory-limit":"cross-env LIMIT=4096 increase-memory-limit"
  },

• 运行使命脚本

npm run fix-memory-limit

• 正常运行 npm run serve
  如果执行成功，看一下问题是否解决
  如果执行失败，报错node --max-old-space-size=4096 不是内部或外部命令，也不是可运行的程序或，则可以进行下面这步，
  修改node_modules/.bin/vue-cli-service.cmd文件，把“%_prog%”去掉双引号
  文件示例：
  

3.2 直接通过max_old_space_size设置

看网上有人说可以直接设置，当我本地环境并未改善，后来还采用3.1中插件的方式来解决，但还是贴在这，也许是设置的试不对，或者其他人可以

"scripts": {
    
    
    "build": "vue-cli-service build && node --max_old_space_size=4096",
  
  },