Memory leak in Vue DevTools browser extension

[Owl23007]

🐛 问题描述

在使用 Vue DevTools 浏览器插件时发现严重的内存泄漏问题，特别是在使用动态路由配置的项目中。内存使用量持续快速增长，最终导致浏览器性能严重下降，影响正常开发工作。

可能的问题：项目使用从后端 API 动态加载的路由配置，Vue DevTools 无法正确识别和显示当前项目的路由结构，这可能是导致内存泄漏的根本原因。

📊 内存泄漏证据

从任务管理器截图可以看到：

• Vue DevTools 插件进程：占用 251.1 MB 内存
• 主应用进程：占用 4,324.6 MB 内存
• 总内存占用：超过 4.5 GB，远超正常范围

🔧 技术环境

前端技术栈：

• Vue: 3.3.13
• Pinia: 3.2.3
• TDesign Vue Next: 1.10.7
• Vue DevTools: 7.7.7 / 6.6.3 (Edge 的官方插件仍为这个版本，且有同样的问题）

运行环境：

• 浏览器: Microsoft Edge 138.0.3351.121 (64-bit)
• 操作系统: Windows 11 24H2

🔄 复现步骤

1. 启动使用动态路由的 Vue 3 项目
2. 项目通过 API 从后端加载路由配置（如代码所示的 homepageModules 和 fixedModules）
3. 启用 Vue DevTools 浏览器插件
4. 观察任务管理器中的内存使用情况
5. 内存使用量持续增长，不会自动释放

🧩 相关代码结构

项目使用了动态路由导入机制：

// 动态导入路由模块
const homepageModules = import.meta.glob('./modules/**/homepage.ts', { eager: true });
const fixedModules = import.meta.glob('./modules/**/result.ts', { eager: true });

// 路由模块转换函数
export function mapModuleRouterList(modules: Record<string, unknown>): Array<RouteRecordRaw> {
  const routerList: Array<RouteRecordRaw> = [];
  Object.keys(modules).forEach((key) => {
    const mod = modules[key].default || {};
    const modList = Array.isArray(mod) ? [...mod] : [mod];
    routerList.push(...modList);
  });
  return routerList;
}

浏览器断点提示：

另一个断点提示如下：

有限的控制台输出：

⚠️ DevTools 异常表现

1. 路由面板显示异常：DevTools 无法正确显示动态加载的路由结构
2. 内存持续增长：进程内存使用量不断上升
3. 性能显著下降：长时间使用后浏览器响应缓慢

🎯 问题分析

可能的原因：

1. DevTools 对动态路由的监听机制存在内存泄漏
2. import.meta.glob 导入的模块未被 DevTools 正确处理
3. 路由变更时的事件监听器未正确清理
4. DevTools 尝试追踪大量动态生成的路由对象导致内存累积

✅ 验证方法

临时解决方案验证：

• 禁用 Vue DevTools 后，内存泄漏问题完全消失
• 证明问题确实来源于 DevTools 插件

🔍 建议调查方向

1. 动态路由支持：改进 DevTools 对 import.meta.glob 和动态路由的处理机制
2. 内存管理：优化路由监听器的生命周期管理
3. 事件清理：确保路由变更时正确清理相关监听器
4. 性能优化：减少对大量动态路由对象的内存占用

📋 期望结果

1. DevTools 能正确识别和显示动态加载的路由
2. 内存使用保持在合理范围内，无持续增长
3. 不影响开发体验和浏览器性能

---

相关标签: bug memory-leak dynamic-routes browser-extension performance

影响等级: 🔥 High - 严重影响开发体验