今天遇到一個(gè)內(nèi)存泄漏的問(wèn)題痢缎,然后被問(wèn)到為什么會(huì)有這個(gè)問(wèn)題以及怎么解決鸵闪,因?yàn)橹皼](méi)遇到到梯皿,便在網(wǎng)上找了下答案主儡,便整理下這個(gè)問(wèn)題奖唯,以防下次再遇到
產(chǎn)生的常見(jiàn)原因
全局變量引起的內(nèi)存泄漏
閉包引起的內(nèi)存泄漏
dom清空或刪除時(shí),事件未清除導(dǎo)致的內(nèi)存泄漏
被遺忘的計(jì)時(shí)器或回調(diào)函數(shù)
其實(shí)每次去面試的時(shí)候糜值,都會(huì)問(wèn)到閉包丰捷,但我之前只是看下閉包的作用坯墨,并沒(méi)有太去了解它
調(diào)試方法
打開(kāi)f12進(jìn)入Memory,選中heap snapshot(堆快照)病往,每進(jìn)行一次操作就點(diǎn)一下左上角圓點(diǎn)捣染,比較兩次內(nèi)存有沒(méi)有回收,若有停巷, 找到引用的這個(gè)對(duì)象耍攘,手動(dòng)GC就好啦
參考:一個(gè)Vue頁(yè)面的內(nèi)存泄露分析
解決方法(網(wǎng)上推薦)
一、直接覆蓋
簡(jiǎn)單粗暴叠穆,直接在package.json替換scripts下的serve指令內(nèi)容:
"serve" : "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve --open"
開(kāi)發(fā)時(shí)運(yùn)行npm run serve或yarn serve即可少漆。
二、優(yōu)雅的覆蓋
和以上的方法唯一的不同硼被,就是不需要編寫(xiě)vue-cli-service包的路徑示损,代碼更優(yōu)雅,也不受包地址的影響嚷硫。
全局安裝npx: npm i -g npx
直接在package.json替換scripts下的serve指令內(nèi)容:
"serve": "npx --max_old_space_size=4096 vue-cli-service serve"
開(kāi)發(fā)時(shí)運(yùn)行npm run serve或yarn serve即可检访。
三、 設(shè)置為8G
--max_old_space_size=4096? 改成? --max_old_space_size=8192
四仔掸、安裝npm install -g increase-memory-limit(這個(gè)方法親自試用并成功解決)
來(lái)自Webpack打包報(bào)"JavaScript heap out of memory"錯(cuò)誤
因?yàn)閂8引擎有對(duì)Node進(jìn)行默認(rèn)的內(nèi)存限制大小脆贵,那么在Node內(nèi)存不足的時(shí)候,可以放寬內(nèi)存大小的使用限制起暮,可以在Node啟動(dòng)的時(shí)候卖氨,傳遞–max-old-space-size或–max-new-space-size來(lái)調(diào)整內(nèi)存大小的使用限制。
但是這種方式需要所有地方都要進(jìn)行設(shè)置负懦,因此需要安裝一個(gè)插件increase-memory-limit筒捺。
安裝
npm install -g increase-memory-limit
運(yùn)行
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