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