动态导入（import()）本身不会导致内存泄漏，但不当使用会间接引发——如长期持有导出对象、未清理副作用、组件销毁后仍保留引用；排查重点是被导入模块的行为及使用方式，而非 import() 调用本身。
动态导入（import()）本身不会直接导致内存泄漏，但不当使用会间接引发泄漏——比如导入模块后长期持有其导出对象、未清理副作用、或在组件销毁后仍保留对动态模块的引用。排查关键不是怀疑 import()，而是检查它引入的模块及其使用方式是否意外延长了对象生命周期。
确认动态导入是否真在“留内存”
很多情况下，内存增长来自被导入模块内部的行为，而非 import() 调用本身。先做基础验证：
- 打开 Chrome DevTools → Memory 面板 → 点击右上角垃圾箱图标（Collect garbage）强制 GC，再拍堆快照
- 执行一次动态导入操作（如点击按钮触发
import('./feature.js')） - 等模块加载完成、逻辑运行完毕后，再次手动 GC + 拍快照
- 切换到 Comparison 视图，筛选 “Objects allocated between snapshots”，重点看：
• 新增的Module实例（尤其是重复导入同一路径时是否累积）
• 导入模块中创建的闭包、全局绑定、定时器、事件监听器
排查高频泄漏点：导入后没“放手”
动态导入返回 Promise，resolve 后通常得到一个命名空间对象（{ default, fn, ... }）。若你把它赋值给全局变量、缓存到长生命周期对象里，或在回调中形成闭包引用大对象，就容易泄漏：
-
避免缓存模块实例到 window 或单例中：
✘window.featureModule = await import('./feature.js');
✔ 改为局部作用域使用，或用完即弃（如调用后设为null） -
检查导入模块是否自行注册全局监听器/定时器：
例如模块内写了document.addEventListener('click', handler)却没提供cleanup()，且调用方未调用它 -
警惕默认导出是类实例或带状态对象：
✘const instance = (await import('./chart.js')).default;→ 后续反复调用却未销毁实例
✔ 确保该类有destroy()方法，并在不需要时显式调用
配合 WeakMap / 动态卸载做主动控制
如果必须缓存模块结果（如按需加载的工具函数库），可用 WeakMap 关联宿主对象，让缓存随宿主自动释放：
- 不推荐：
const cache = new Map(); cache.set(key, module)（强引用锁住模块） - 推荐：
const cache = new WeakMap(); cache.set(hostObj, module)（hostObj 被回收时，module 可被 GC） - 更彻底：导入后立即解构使用，避免保留整个模块对象：
const { renderChart, destroyChart } = await import('./chart.js'); renderChart(); // 用完不存引用
Vue/React 等框架中的特别注意
在组件级动态导入场景下，泄漏常发生在组件已卸载，但导入的模块回调仍在执行：
- React 中：用
useEffect清理函数判断组件是否已 unmount：
let isMounted = true; import('./logic.js').then(m => { if (isMounted) m.doWork() }); return () => { isMounted = false; }; - Vue 中：在
onBeforeUnmount中取消未完成的import()Promise（需封装可取消 Promise）或清空模块副作用 - 通用原则：不要把
import()放在事件回调里反复触发却不加节流或防重入；重复导入相同模块虽被 V8 缓存，但模块内初始化逻辑可能多次执行并堆积资源
