公司有個基於vue的項目在運行npm run build的時候會報內存溢出,今天在某個技術流交羣也有位小夥伴基於angular的項目也出現了這個問題,因此查了一些相關的資料總結了一下,下面會詳細說明前端三大框架編譯時遇到這個問題具體怎麼解決。首先看我模擬出的報錯內裏面有句關鍵的話,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 命令後就行了,示例以下node
"build": "node --max_old_space_size=4096 build/build.js"
直接在 node 後面寫上 --max_old_space_size=4096 就行了,我這裏設置的內存大小是4G,這個具體的大小能夠根據本身的項目狀況來設置就行了。而後再從新運行 npm run build 就能夠正常打包構建了。webpack