Chrome DevTools中JS堆的(compiled code)堆积是否为内存泄漏？

1. 什么是(compiled code) #

(compiled code)是Chrome DevTools堆快照里的分类，对应V8引擎将JavaScript代码编译后生成的字节码或机器码。这包括你写的React组件渲染逻辑、事件处理函数、工具函数等编译后的产物，也可能包含浏览器内部部分编译后的代码，但主要指向应用自身代码编译后的内存占用。

2. 是否属于内存泄漏？ #

不能直接认定是内存泄漏，得结合快照的变化趋势判断：

• 如果每次执行疑似泄漏的操作后，(compiled code)的占用量持续上升，且操作结束后没有明显回落，那大概率和内存泄漏相关。常见原因是重复创建新的函数实例（比如在组件render方法里定义函数、useCallback依赖项设置错误导致每次渲染都生成新函数），V8会反复编译这些新函数，旧的编译代码又因为被引用无法被垃圾回收。
• 如果只是第一次操作后增长，后续多次操作后占用稳定，那可能是正常的懒加载代码编译（比如路由懒加载的组件首次加载时编译），不属于泄漏。

3. 页面稳定后代码加载至内存的原因 #

• V8即时编译（JIT）机制：V8会把频繁执行的JS代码编译成高效的机器码存在内存中，提升运行速度，即使页面处于稳定状态，这些编译后的代码也会保留在内存里，直到垃圾回收器判定其不再被引用。
• 动态导入/懒加载：如果应用使用了React.lazy或者import()动态加载组件，页面稳定后执行操作才会触发这些组件的代码加载与编译，这部分编译后的代码会进入(compiled code)分类。
• 未清理的引用：如果组件卸载时没有清理事件监听、定时器、外部订阅等，这些引用会持有对应的函数编译代码，导致其无法被垃圾回收，持续留在内存中。

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