Why Does My Vue Vite Dev Server Leak Memory Outside the V8 Heap?

Below is a potential explanation:

Difference Between V8 Heap and OS-Reported Memory

The V8 heap profiler only tracks the memory allocations made by JavaScript objects managed by the V8 garbage collector. However, Node.js processes allocate memory from multiple sources that aren’t reflected in the V8 heap snapshot. This means that while your V8 heap might remain steady at ~200 MB, additional memory (several gigs) could be allocated outside of V8, such as:

• Native Module Allocations: Memory allocated by C/C++ code in native addons or npm packages isn’t tracked by V8.
• Buffers and External Memory: For example, Node’s Buffer allocations (or other external resources) use memory outside of the V8 heap.
• WebAssembly: Although some WebAssembly memory is visible, there might be portions that aren’t counted in the V8 heap.
• Other native memory usage: Frameworks or build tools (like those in the Vite ecosystem) may retain resources in native memory or use native subsystems for caching.

Why the Leak Occurs Even When Idle

Since your dev server leaks even when idle, it likely means the leak does not come directly from application code running repeatedly in JavaScript. Instead, the leak might be:

• Caused by some npm package (or dependency) that is initializing native components, caches, or other background tasks.
• Related to the development server toolchain (e.g., Vite or one of its plugins) which might use native or external memory management for file watching, caching, or processing.

Clues on Investigating the Leak

Knowing that the profilers only show the V8 heap, you might consider:

• Investigating Native Memory: Use tools designed to track native memory usage. On Apple Silicon, since node-memwatch isn’t supported, you might try:
  • Using process.memoryUsage() periodically to compare the various memory components (RSS, external, arrayBuffers).
  • Using OS-level profiling tools (like Instruments on macOS) to inspect memory allocations.
• Checking Dependencies: Look into the dependencies of your dev server. If a specific npm package allocates large C++ objects or buffers improperly, they won’t show in the V8 heap.
• Updating Dependencies: Ensure you’re on the latest versions of Node.js, Vue, Vite, and any related plugins, as memory leaks are often fixed in newer releases.

Summary

The memory profilers aren’t showing the leak because:

• They focus on the V8 heap (JavaScript objects) and not on native memory allocations.
• The leak likely originates from a native module or non-V8 allocation (e.g., buffers, C++ caches) being used by one of your dependencies or the Vite dev server itself.

By expanding your investigation to track all memory consumption (using OS tools or comprehensive Node memory trackers), you might narrow down which component is responsible for the excessive native memory consumption.