1. 程式人生 > >(node.js)webpack打包報javaScript heap out of memory,記憶體溢位,如何解決

(node.js)webpack打包報javaScript heap out of memory,記憶體溢位,如何解決

基於vue的專案在執行npm run dev的時候會報記憶體溢位,所以查了一些相關的資料總結了一下,下面會詳細說明這個問題具體怎麼解決。首先看我模擬出的報錯內容具體截圖如下:


裡面有句關鍵的話,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 無法分配足夠記憶體給 JavaScript 的情況,可以用這個辦法來放寬V8預設的記憶體限制,避免在執行過程中稍微多用了一些記憶體就輕易崩潰,既然知道了解決辦法那就好辦了,下面來詳細說明vue框架下的具體操作。

因為基於 vue-cli 生成的專案,vue沒有把 package.json 裡面 scripts 欄位的指令碼命令的node命令隱藏起來,我們直接把上面v8提供的選項引數直接寫入scripts 欄位的 node 命令後就好了,示例如下:

"scripts": {
    "dev": "node --max_old_space_size=4096 build/dev-server.js",
    "build": "node --max_old_space_size=4096 build/build.js"
  }

直接在 node 後面寫上 --max_old_space_size=4096 就好了,我這裡設定的記憶體大小是4G,這個具體的大小可以根據自己的專案情況來設定就好了。然後再重新執行 npm run dev/build 就可以正常執行和打包了。