Twenty 內(nèi)存越跑越高用 DevTools 快照對(duì)比三步鎖定泄漏源頭【免費(fèi)下載鏈接】twentyThe open alternative to Salesforce, designed for AI.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/tw/twentyTwenty 的 CRM 頁(yè)面開(kāi)著開(kāi)著就卡任務(wù)管理器里它的內(nèi)存條蹭蹭往上漲關(guān)掉彈層也不回落。這篇文章帶你用 Chrome DevTools 的 Memory 面板做 Twenty 內(nèi)存泄漏排查錄一次分配、對(duì)比兩次快照把泄漏源頭鎖定到具體模塊。先搞清 Twenty 的內(nèi)存卡在哪內(nèi)存泄漏說(shuō)白了就是對(duì)象沒(méi)人用了引用卻還在GC 收不走。Twenty 是重前端架構(gòu)packages/twenty-front/src/modules/ 下五十來(lái)個(gè)模塊Jotai 狀態(tài)、SSE 訂閱、命令菜單常駐內(nèi)存AI 與工作流模塊又會(huì)在長(zhǎng)任務(wù)里持續(xù)產(chǎn)生對(duì)象。所以前端用 DevTools 查服務(wù)端緩存?zhèn)瓤勘O(jiān)控確認(rèn)這里只講瀏覽器里的那一半。動(dòng)手前30秒把工具備齊拉取 Twenty 源碼git clone https://gitcode.com/GitHub_Trending/tw/twenty按項(xiàng)目文檔把 Twenty 跑起來(lái)瀏覽器里能正常登錄并打開(kāi) CRM 頁(yè)面頁(yè)面按F12或CtrlShiftI打開(kāi) Chrome DevTools切到Memory面板確認(rèn)頁(yè)面處于日常真實(shí)使用狀態(tài)有視圖、有工作流記錄、AI 功能可用上圖排查前確認(rèn) Twenty 應(yīng)用正常運(yùn)行、功能可觸達(dá)設(shè)置頁(yè) Webhook 測(cè)試界面實(shí)操?gòu)陌聪落浿奇I到鎖定嫌疑對(duì)象用 Allocation Sampling 抓一輪分配Memory 面板頂部分類下拉里選Allocation sampling點(diǎn)Record去 Twenty 里走一遍日常動(dòng)線切對(duì)象視圖、篩選數(shù)據(jù)、觸發(fā)一次 AI 功能約 1-2 分鐘回來(lái)點(diǎn)Stop看采樣表里Bytes最高的幾條調(diào)用棧。如果大頭集中在業(yè)務(wù)模塊的某個(gè)函數(shù)上泄漏嫌疑基本就在它那一片如果大頭是框架內(nèi)部如 React Fiber說(shuō)明是業(yè)務(wù)代碼持有了框架對(duì)象不放繼續(xù)往下查。按 Retained Size 排序揪出大頭分類改選Heap snapshot點(diǎn)Take heap snapshot作為基線此刻頁(yè)面剛打開(kāi)、盡量干凈再做一輪操作回到 Memory 面板點(diǎn)Garbage collect按鈕觸發(fā)一次 GC再拍第二張快照在對(duì)象列表的Retained Size列上點(diǎn)一下排序從大到小看Retained 值大且?guī)losure/Fiber/ 定時(shí)器回調(diào)特征的節(jié)點(diǎn)就是你的一號(hào)嫌疑人。注意單看絕對(duì)值意義不大一張快照只能說(shuō)明現(xiàn)在大不能說(shuō)明在漲。對(duì)比兩次快照確認(rèn)只漲不跌打開(kāi)第二張快照上方顯示模式下選Comparison對(duì)比對(duì)象選第一張基線只看Delta為正的對(duì)象按 Delta 排序如果某類對(duì)象閉包、Fiber、SSE 回調(diào)、定時(shí)回調(diào)在兩輪操作間只增不減大概率就是泄漏如果 Delta 基本持平那只是正常緩存不用慌。上圖Twenty 應(yīng)用內(nèi)界面示例——這類視圖頁(yè)面就是內(nèi)存快照對(duì)比時(shí)的操作對(duì)象排查清單4種最高頻的泄漏源頭泄漏類型你看到的現(xiàn)象去哪找項(xiàng)目?jī)?nèi)模塊怎么修隱式全局變量快照里window子樹(shù)掛著業(yè)務(wù)對(duì)象packages/twenty-front/src/modules/browser-event賦值前補(bǔ)上const/let聲明定時(shí)器殘留快照反復(fù)出現(xiàn)setTimeout/setInterval回調(diào)packages/twenty-front/src/modules/ai、packages/twenty-front/src/modules/sse-db-event清理函數(shù)里clearInterval事件監(jiān)聽(tīng)未成對(duì)移除#listeners里同名 handler 越積越多packages/twenty-front/src/modules/keyboard-shortcut-menu、packages/twenty-front/src/modules/side-paneladdEventListener和removeEventListener配對(duì)緩存只進(jìn)不出服務(wù)端內(nèi)存緩漲、對(duì)象量平穩(wěn)上升packages/twenty-server/src/engine/core-entity-cache、packages/twenty-server/src/engine/workspace-cache給緩存補(bǔ) TTL 或容量上限// 錯(cuò)誤忘聲明的賦值掛到 window 上 function tick() { pending fetchNext(); } // 正確const pending 卸載時(shí) clearInterval(timer)讓內(nèi)存占用長(zhǎng)期不超標(biāo)給前端緩存和實(shí)體緩存設(shè)過(guò)期時(shí)間或容量上限別讓 map 無(wú)限長(zhǎng)大組件卸載時(shí)把定時(shí)器和事件監(jiān)聽(tīng)一起摘掉和掛載邏輯寫在同一處AI 長(zhǎng)任務(wù)的結(jié)果用完就解綁別掛在頁(yè)面級(jí)長(zhǎng)生命周期對(duì)象上關(guān)鍵模塊改動(dòng)后重跑一遍本文的快照對(duì)比Delta 為正就停手修掉 ?SSE 訂閱隨視圖生命周期創(chuàng)建和銷毀切走視圖時(shí)確認(rèn)訂閱被取消一輪采樣→快照→對(duì)比十幾分鐘就能跑完勝在便宜、可復(fù)現(xiàn)比對(duì)著日志猜強(qiáng)得多。明天打開(kāi) Twenty把這篇的三步走一遍——如果 Delta 里揪出了閉包直接順著它去 packages/twenty-front/src/modules/ 里查誰(shuí)沒(méi)放手?！久赓M(fèi)下載鏈接】twentyThe open alternative to Salesforce, designed for AI.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/tw/twenty創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考