有一天，我盯着项目
router/index.js，想知道这个项目到底有多少页面、多少命名路由、多少是复用的组件？
我发现 —— 根本没人统计过。
我们开发 Vue 项目时，通常会按照模块不断往 routes 中追加页面，刚开始还井井有条，但随着业务膨胀，路由配置往往就成了一个“黑盒”：
- 你不知道组件复用了多少次
- 你不知道哪些页面没写
name - 你不知道有多少页面需要缓存
keepAlive - 更不知道你写的
detail.vue，已经被别人复用了 5 次了……
而这些信息，不仅是团队协作中极重要的架构资产，也是前端工程走向规模化、模块化、标准化的必经之路。
于是，我写了一个工具，叫做：
🌈 vue-route-analyzer
一个不需要运行项目、纯靠静态分析就能输出完整路由结构和使用情况的小工具。
📦 项目地址
👉 GitHub：vue-route-analyzer
🧰 能做什么？
| 分析内容 | 说明 |
|---|---|
| 路由总数 | 计算配置中所有路由数量 |
| 命名 / 未命名路由 | 是否配置了 name 字段 |
keepAlive 使用统计 | 检查 meta 中是否启用 keepAlive |
| 动态组件统计 | 是否使用了 () => import(...) |
是否配置 props | 检查是否开启 props 传参 |
| 同名路由检测 | 检测多个路由是否使用了相同的 name |
| 路由前缀分布 | 统计 /plan、/market 等路径前缀使用情况 |
meta.flag 页面标识 | 分析 meta.flag 设置情况 |
| ✅ 组件复用分析 | 检测多个路由是否引用了同一组件路径 |
| ✅ 页面类型自动分类 | 识别 list / detail / add / edit / view 页面 |
| ✅ 支持导出 JSON/MD 报告 | 用于文档记录、代码审计、协作沟通 |
📦 安装依赖
npm install @babel/parser @babel/traverse chalk
🚀 使用方式
基本命令（控制台输出）
node analyze-router.js ./src/router/index.js
导出 JSON 格式报告
node analyze-router.js ./src/router/index.js --json report.json
导出 Markdown 报告
node analyze-router.js ./src/router/index.js --md report.md
📊 控制台输出示例
📦 路由资产分析
├─ 总路由数量：134
├─ 命名路由：120
├─ 未命名路由：14
├─ 含 keepAlive：67
├─ 动态组件（无路径）：45
├─ 含 props 配置：20
├─ 重复 name：
│ ⚠️ myPlan (2 次)
├─ 路径前缀统计：
│ /plan - 22 个
│ /market - 17 个
├─ 含 flag 页：
│ /app/detail => flag=4
├─ 引用重复组件路径：
│ ⚠️ ../views/detail.vue 被 3 个路由复用
├─ 页面类型识别：
│ list 页面：32 个
│ detail 页面：28 个
│ view 页面：10 个
✅ 分析完成
📄 Markdown 输出样例（部分）
# 📦 路由资产分析报告
- 总路由数量：134
- 命名路由：120
- 未命名路由：14
- 含 keepAlive：67
- 动态组件（无路径）：45
- 含 props 配置：20
## ⚠️ 重复 name
- `myPlan` (2 次)
## ♻️ 组件复用统计
- `../views/detail.vue` 被 3 个路由复用
## 🧩 页面类型统计
### list 页面（32 个）
- /plan/list
- /project/list
### detail 页面（28 个）
- /plan/detail
✨ TODO 计划
- 组件路径存在性校验
- 页面可视化输出（HTML / SVG / Graph）
- 可视化结构图（按目录 / 模块分布）
🧠 小结
如果你也维护着 Vue 项目，手动整理路由成了负担，不妨试试这个工具。哪怕只是为了看看有多少重复 name 或 component，也是个不错的开始。
路由不是为了让你写得越来越多，而是为了让你清楚你都写了什么。
欢迎 Star ⭐️、Fork 🍴、使用反馈 🧠
👉 项目地址：github.com/cynthiaCh/v…
