起因

項(xiàng)目中使用了nuxtjs框架進(jìn)行開發(fā)，在開發(fā)測(cè)試過(guò)程中均無(wú)出現(xiàn)任何異常。部署上線到正式生產(chǎn)環(huán)境之后，運(yùn)行了五六天之后node異常，服務(wù)停止響應(yīng)，pm2管理平臺(tái)無(wú)法恢復(fù)應(yīng)用程序。需要進(jìn)入生產(chǎn)環(huán)境進(jìn)行重啟項(xiàng)目。查閱運(yùn)行日志之后發(fā)現(xiàn)生產(chǎn)服務(wù)器會(huì)緩慢堆積tcp鏈接。在到一定的程度之后，會(huì)引發(fā)node程序 cpu 100%占用，停止響應(yīng)。最初階段以為是_nuxt下的文件并未通過(guò)nginx訪問，而是通過(guò)node進(jìn)行讀取的，造成文件打開過(guò)多，重新配置了nginx靜態(tài)文件讀取規(guī)則之后，問題依舊。在解決這個(gè)問題的過(guò)程中發(fā)現(xiàn)某個(gè)文章中提到，如果node內(nèi)存泄漏會(huì)造成node進(jìn)程跑滿當(dāng)前cpu,并且打開文件數(shù)飆增。

調(diào)試

調(diào)試工具

node-heapdump

chrome調(diào)試工具

調(diào)試流程

安裝node-heapdump。

npm install node-heapdump --save-dev

打開項(xiàng)目根目錄的nuxt.config.js文件，進(jìn)行heapdump配置。

// 內(nèi)存快照代碼var headpdump = require('heapdump') //setInterval(function () {console.log('st headpdump')headpdump.writeSnapshot(function(err, filename) {console.log('dump written to', filename)})}, 15000)module.exports = {...// nuxt配置}

我設(shè)定了每1.5秒,heapdump進(jìn)行內(nèi)存快照一次。
并且在間隔過(guò)程中進(jìn)行以下操作。

載入頁(yè)面，等候一次快照

刷新一次頁(yè)面，等候一次快照

等待快照完成之后，heapdump會(huì)將快照文件保存在項(xiàng)目根目錄中。

接著，我們打開chrome開發(fā)者工具，切換到memory選項(xiàng)卡，點(diǎn)擊load載入hepdump生成在根目錄的文件。

分別載入第一次頁(yè)面快照，跟刷新一次之后的快照。我們點(diǎn)擊切換右側(cè)下拉箭頭的視圖選項(xiàng)卡類型。點(diǎn)擊切換視圖到Comparison。

在等候Chrome比對(duì)兩個(gè)文件之后，可以看到第二個(gè)文件的內(nèi)存快照信息。查看右側(cè)# Delta選項(xiàng)。

可以看到 刷新一次之后，增加了69個(gè)閉包未釋放。
展開閉包(closure)可以看到大量的request請(qǐng)求未釋放。
由此可見，問題出現(xiàn)在項(xiàng)目中服務(wù)端請(qǐng)求服務(wù)接口上。

解決問題

檢查services文件中的請(qǐng)求方法代碼。

import Urls from './url' import Fetch from './fetch.js'let fn = {} Object.keys(Urls).forEach(key => {fn[key] = (data, headers) => {return new Promise((resolve, reject) => {resolve(Fetch(Urls[key].url, {method: Urls[key].method, data, headers}))})} })export default fn

發(fā)現(xiàn)了問題，services 通過(guò)return請(qǐng)求，但是使用的數(shù)據(jù)都是通過(guò)箭頭方法傳遞到下一層，變量被層層引用，這樣會(huì)造成閉包無(wú)法完全釋放。因?yàn)閭魅氲臄?shù)據(jù)一直都有引用無(wú)法gc，這樣也造成了node打開的tcp鏈接無(wú)法關(guān)閉釋放。

我們修改了services方法，經(jīng)過(guò)修改的代碼如下:

import Urls from './url' import Fetch from './fetch.js'let fn = {} Object.keys(Urls).forEach(key => {fn[key] = function (data, headers) {return Fetch(Urls[key].url, {method: Urls[key].method, data, headers})} })export default fn

再次通過(guò)調(diào)試流程生成內(nèi)存快照，發(fā)現(xiàn)request閉包都回收完畢。內(nèi)存泄漏問題初步告一段落，項(xiàng)目更新之后已穩(wěn)定運(yùn)行。

參考文章來(lái)源
http://frontenddev.org/link/j...

文章初次發(fā)布于https://www.yodfz.com/detail/...

總結(jié)

以上是生活随笔為你收集整理的NUXT内存泄漏引发问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。