webpack构建内存溢出解决方案

关于vue项目构建Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory的解决方案

问题如图

原因

node中通过javascript使用内存时只能使用部分内存（64位系统下约为1.4 GB，32位系统下约为0.7 GB），这就是我们编译项目时为什么会出现内存泄露了。

 

解决方案

查看安装的node的版本

node -v

8.0以上的版本通过设置NODE_OPTIONS环境变量改变node中js的最大运行内存，设置为4G

set NODE_OPTIONS=--max_old_space_size=4096

 

8.0以下版本，使用increase-memory-limit模块解决

npm install -g increase-memory-limit

在项目根目录下执行即可

increase-memory-limit

 

或者，您可以配置一个npm任务来运行程序。

// ...
  "scripts": {
    "fix-memory-limit": "cross-env LIMIT=2048 increase-memory-limit"
  },
  "devDependencies": {
    "increase-memory-limit": "^1.0.3",
    "cross-env": "^5.0.5"
  }
// ...

执行

npm run fix-memory-limit

 

以上是通过扩大运行内存的方式解决这个问题，归根结底需要找到内存消耗大的模块，进行优化。本人排查项目中导致这个问题的根源，发现是sass-resource-loader的使用导致的，取消全局sass变量混入之后，该问题得到解决。编译速度从15min到20s