升级Ember CLI从3.4.3至3.24.0后内存泄漏问题排查求助

Hey there, sorry to hear you're hitting such tricky memory leaks after your Ember CLI upgrade—jumping across that many major versions can definitely introduce unexpected memory management issues. Let's break down actionable steps to diagnose and address this, tailored to your environment:

1. Start with Ember Version Upgrade-Specific Leak Points #

The jump from 3.4 to 3.24 includes tons of framework changes, so these are the most likely culprits:

• Component Lifecycle & Cleanup Gaps: Ember 3.13+ introduced Glimmer components, and mixing old-style component classes with new ones can break destruction workflows. If your components aren't properly cleaning up event listeners, timers (setInterval/setTimeout), or third-party library instances (like charts, editors) in hooks like willDestroyElement or destroy, those instances + attached DOM nodes will stick around uncollected.
• Route & Service Instance Leaks: Ember adjusted route caching mechanisms in 3.x—if you're using keepAlive routes, make sure their bound services/data are properly released when the route is no longer active. Also, since services are singletons, check if any services are holding onto stale route models, unsubscribed event listeners, or large unused data caches.
• Auto-Tracking Misuse: Ember 3.22+ doubled down on auto-tracking. If you're using @tracked properties but missing unique key attributes in loop-rendered elements, Ember can't reuse DOM nodes properly—this leads to endless new node creation with old nodes left uncollected.

2. Fix Node.js-Side Test Case Memory Leaks #

Your tests failing even with increased --max-old-space-size points to leaks in the test pipeline itself:

• Test Isolation Issues: Ensure your test framework (like QUnit) is properly destroying Ember app instances between tests. Double-check that afterEach hooks call destroyApp to clean up all app state—leftover app instances will pile up memory over time.
• Third-Party Test Plugin Compatibility: Some Ember test addons might not be fully compatible with 3.24. Try disabling non-essential plugins (like mock data tools or Testem extensions) one by one to see if any are causing leaks.
• Node.js Version Tweak: While Node 12.22.1 is LTS, Ember 3.24 officially supports Node 12.x-14.x. Try upgrading to Node 14's latest LTS release—sometimes V8 engine fixes in newer Node versions resolve memory collection bugs with Ember's code.

3. Diagnose Browser-Side DOM Node Leaks #

Since some apps still fail even with more Node memory, browser-side leaks are definitely at play:

• Chrome DevTools Deep Dive: Use Chrome's Memory panel to track detached DOM nodes:
  1. Trigger key app actions (route switches, component render/destroy cycles), then take multiple memory snapshots.
  2. Compare snapshots to spot growing numbers of Detached DOM nodes—check their reference chains to find which code is holding onto them (e.g., unremoved event listeners, lingering component instances).
• Third-Party Addon Checks: Old Ember addons (UI libraries, data clients) might not be updated for 3.24. Try upgrading all addons to their latest compatible versions, or temporarily disable them to isolate leaks.
• Ember Inspector Audit: Use the Ember Inspector's Routes and Components panels to verify that old route components are fully destroyed after navigation—leftover instances are a common leak source.

4. Temporary Workarounds & Long-Term Fixes #

• Temporary Mitigations:
  • Beyond increasing --max-old-space-size, use Node's --expose-gc flag to manually trigger garbage collection in test scripts (only for testing environments).
  • Split large test suites into smaller, separate tasks to avoid overwhelming Node's memory in one run.
• Long-Term Solutions:
  • Gradually adopt Ember Octane best practices: Glimmer components, native classes, and proper auto-tracking usage are designed for better memory efficiency.
  • Upgrade to the latest patch release of Ember 3.24 (the final 3.24.x version)—the Ember team often backports memory leak fixes to LTS versions.
  • Add memory monitoring to your CI pipeline with tools like clinic.js to catch leaks early before they cause failures.

内容的提问来源于stack exchange，提问作者Poonam