現象描述
昨天用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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！