在Node中通過JavaScript使用內存時只能使用部分內存（64位系統(tǒng)：1.4 GB，32位系統(tǒng)：0.7 GB），這個時候，如果前端項目非常的龐大，Webpack編譯時就會占用很多的系統(tǒng)資源，如果超出了V8引擎對Node默認的內存限制大小時，就會產生內存泄露(JavaScript heap out of memory)的錯誤

ineffective mark-compacts neer heap limit

報錯截圖

今天遇到一個內存泄漏的問題，然后被問到為什么會有這個問題以及怎么解決，因為之前沒遇到到，便在網上找了下答案，便整理下這個問題，以防下次再遇到

產生的常見原因

1. 全局變量引起的內存泄漏
2. 閉包引起的內存泄漏
3. dom清空或刪除時，事件未清除導致的內存泄漏
4. 被遺忘的計時器或回調函數(shù)

其實每次去面試的時候，都會問到閉包，但我之前只是看下閉包的作用，并沒有太去了解它

調試方法

打開f12進入Memory，選中heap snapshot（堆快照），每進行一次操作就點一下左上角圓點，比較兩次內存有沒有回收，若有， 找到引用的這個對象，手動GC就好啦
參考：一個Vue頁面的內存泄露分析

解決方法（網上推薦）

一、直接覆蓋

簡單粗暴，直接在package.json替換scripts下的serve指令內容：

"serve" : "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve --open"

開發(fā)時運行npm run serve或yarn serve即可。

二、優(yōu)雅的覆蓋

和以上的方法唯一的不同，就是不需要編寫vue-cli-service包的路徑，代碼更優(yōu)雅，也不受包地址的影響。

全局安裝npx: npm i -g npx
直接在package.json替換scripts下的serve指令內容：

"serve": "npx --max_old_space_size=4096 vue-cli-service serve"

開發(fā)時運行npm run serve或yarn serve即可。

三、 設置為8G

--max_old_space_size=4096  改成  --max_old_space_size=8192

四、安裝npm install -g increase-memory-limit（這個方法親自試用并成功解決）

來自 Webpack打包報"JavaScript heap out of memory"錯誤

因為V8引擎有對Node進行默認的內存限制大小，那么在Node內存不足的時候，可以放寬內存大小的使用限制，可以在Node啟動的時候，傳遞–max-old-space-size或–max-new-space-size來調整內存大小的使用限制。
但是這種方式需要所有地方都要進行設置，因此需要安裝一個插件increase-memory-limit。

安裝

npm install -g increase-memory-limit

運行

increase-memory-limit

在package.json里修改

“scripts”: {
“fix-memory-limit”: “cross-env LIMIT=2048 increase-memory-limit”
},
“devDependencies”: {
“increase-memory-limit”: “^1.0.3”,
“cross-env”: “^5.0.5”
}

執(zhí)行一次

npm run fix-memory-limit