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