路由分析小工具：Vue 2 项目的路由资产一眼掌握

喝拿铁写前端2025-04-21 19:53

在维护项目路由时，总是手动粗算路由量，根本没有统计结构。之后我写了一个小工具，用来快速分析 Vue 2 项目中的路由配置文件，并将它新建了一个小工具项目：

这个工具是做啥的？

vue-route-analyzer 是一个 基于 AST 静态分析 的路由分析工具，支持对 Vue 2 + Vue Router 项目的路由文件进行分析，不需要运行项目。

一行命令，让你看清路由资产总量，命名情况，keepAlive，动态加载等详细信息：

bash 复制代码

node analyze-router.js ./src/router/index.js

能分析啥？

分析内容	说明
总路由量	计算数组中的路由总数
命名路由	`name` 字段存在的路由
未命名路由	缺少 `name` 字段的
`keepAlive` 设置	分析 meta.keepAlive
动态 component	如 `() => import(...)`
`props` 配置	路由是否配置 `props` 传参
同名路由	检测重复 name
path 前缀统计	如 `/plan`，`/market`，便于分分路由统筹
meta.flag	分析 flag 字段是否配置

使用方法

bash 复制代码

# 安装所需的依赖
npm install @babel/parser @babel/traverse chalk

# 基本用法
node analyze-router.js ./src/router/index.js

输出示例

bash 复制代码

📦 路由资产分析
├─ 总路由数量：134
├─ 命名路由：120
├─ 未命名路由：14
├─ 含 keepAlive：67
├─ 动态组件：45
├─ 含 props 配置：20
├─ 重复 name：
│    ⚠️  myPlan (2 次)
├─ 路径前缀统计：
│    /plan - 22 个
│    /market - 17 个
├─ 含 flag 页：
│    /app/detail => flag=4

✅ 分析完成

项目仓库

GitHub 项目：vue-route-analyzer

未来计划 (TODO)

路由目录结构可视化（HTML / Graph等输出）
组件使用频次统计

小结

如果你也在维护或切换组内 Vue 项目，希望它能帮助你快速理解路由结构和配置质量，欢迎 Star + Fork，或在下方评论区分享你的用法体验！

路由不是用来确定你定不定路的，是当你写的过多了，才需要分析。

你认同吗？