uniapp-component-analyzer

🔍 UniApp 项目组件依赖分析工具 - 自动分析 UniApp 项目的组件依赖关系，生成可视化思维导图和交互式图表。

✨ 功能特性

• 📱 页面依赖分析 - 自动扫描并分析所有页面的组件依赖
• 🧩 组件依赖链 - 递归分析组件间的依赖关系
• 📊 多格式输出 - 支持 Markdown、JSON、CSV、TXT、HTML 多种格式
• 🎨 交互式图表 - 生成基于 ECharts 的交互式依赖关系图
• 🔗 页面跳转分析 - 分析页面间的跳转关系
• 📈 使用统计 - 统计组件使用频率和热度排行
• 🎯 只统计自定义组件 - 自动过滤 uniapp 原生组件、HTML 标签和 uni-ui 组件

📦 安装

全局安装（推荐）

npm install -g uniapp-component-analyzer

项目内安装

npm install --save-dev uniapp-component-analyzer

🚀 使用方法

全局安装后使用

在任何 UniApp 项目根目录下运行：

# 使用主命令
uniapp-analyze

# 或使用别名
uniapp-analyzer

项目内安装后使用

在 package.json 中添加脚本：

{
  "scripts": {
    "analyze": "uniapp-analyze"
  }
}

然后运行：

npm run analyze

使用 npx（无需安装）

npx uniapp-component-analyzer

📋 前置要求

• ✅ 必须在 UniApp 项目根目录下运行（包含 pages.json 文件）
• ✅ Node.js >= 24.11.1
• ✅ 项目结构符合 UniApp 标准

📂 输出文件

运行后会在项目根目录生成 mindmap-output/ 文件夹，包含以下文件：

1. component-mindmap.md

Markdown 格式的思维导图，包含：

• 📊 项目概览统计
• 📱 页面列表及依赖
• 📦 组件使用统计
• 🔍 组件详情
• 🔗 页面跳转关系

2. component-data.json

JSON 格式的结构化数据，包含：

• 完整的页面信息
• 组件定义和依赖关系
• 使用统计数据
• 元数据信息

3. component-usage.csv

CSV 格式的组件统计表格，可用 Excel 打开，包含：

• 组件名称
• 使用次数
• 组件类型
• 文件路径
• 依赖组件列表

4. component-report.txt

纯文本格式的分析报告，包含：

• 项目统计摘要
• 页面依赖分析
• 组件使用排行榜
• 组件依赖关系

5. component-graph.html

交互式 HTML 图表（基于 ECharts），提供：

• 🔍 可视化依赖关系图
• 🎯 组件搜索功能
• 📊 统计面板
• 🖱️ 交互式节点操作

6. page-navigation.html

页面跳转关系可视化图表，展示：

• 🔗 页面间的跳转关系
• 🎯 关键页面识别
• 📊 入度出度统计
• 🔄 双向跳转检测

🎯 使用场景

1. 项目重构

• 了解组件依赖关系，安全地重构代码
• 识别高频组件，优先优化
• 发现冗余组件，清理无用代码

2. 团队协作

• 新成员快速了解项目结构
• 文档化组件关系
• 代码审查参考

3. 性能优化

• 识别组件引用热点
• 优化组件加载策略
• 减少不必要的依赖

4. 架构设计

• 评估组件复杂度
• 规划组件拆分
• 优化目录结构

📖 示例输出

控制台输出

╔══════════════════════════════════════════════════════╗
║      UniApp 组件依赖分析工具                         ║
║      自动生成项目组件思维导图                        ║
╚══════════════════════════════════════════════════════╝

🔍 检查项目环境...
✅ 检测到UniApp项目

📦 检查依赖...
  ✓ fs-extra
  ✓ glob
  ✓ cheerio
  ✓ @babel/parser
  ✓ @babel/traverse

🚀 开始分析项目组件依赖...

📱 扫描页面...
  发现页面: pages/index/index
  发现页面: pages/user/user
  ...
✅ 共扫描到 45 个页面

🔍 扫描组件依赖链...
✅ 共分析 128 个自定义组件

🔗 分析页面跳转关系...
✅ 分析了 45 个页面的跳转关系

📝 开始生成分析报告...
✓ Markdown思维导图已生成
✓ JSON数据已生成
✓ CSV数据已生成
✓ 文本报告已生成
✅ 交互式HTML图表已生成

🎉 分析完成！
📁 输出文件保存在: mindmap-output/

🌐 交互式图表:
   用浏览器打开: mindmap-output/component-graph.html

Markdown 输出示例

# 🗺️ UniApp项目组件依赖关系图

> **分析报告** | 生成时间: 2026-01-04 10:30:00

## 📊 项目概览

- **页面总数**: 45 个
- **自定义组件**: 128 个
- **公共组件**: 85 个
- **私有组件**: 43 个
- **总引用次数**: 312 次
- **页面跳转关系**: 67 个

## 📱 页面列表

### 1. pages/index/index

**文件路径**: pages/index/index.vue

**引用的自定义组件:**

1. **TopBar** [public] ⚡被引用 15 次
2. **ProductList** [public] ⚡被引用 8 次
3. **Banner** [public] ⚡被引用 6 次
   - 依赖的子组件:
     1. SwiperItem [public] (使用2次)
     2. ImageLoader [public] (使用12次)

...

⚙️ 配置说明

工具内置了合理的默认配置，通常无需修改。如需自定义，可以参考 lib/config.js：

module.exports = {
    // 需要排除的文件或目录
    exclude: [
        'node_modules',
        'dist',
        'build',
        '.git',
        'unpackage'
    ],

    // 需要排除的组件前缀
    excludeComponentPrefixes: [
        'u-',      // uView UI
        'uni-',    // uni-ui
        'v-'       // Vue指令
    ],

    // 输出配置
    output: {
        dir: 'mindmap-output',
        formats: ['markdown', 'json', 'csv', 'text']
    }
};

🔧 技术栈

• @babel/parser - JavaScript 代码解析
• @babel/traverse - AST 遍历
• cheerio - HTML/XML 解析
• fs-extra - 文件系统操作
• glob - 文件匹配
• chalk - 终端颜色输出
• ECharts - 数据可视化

📝 工作原理

1. 解析 pages.json - 获取所有页面路径
2. 扫描页面文件 - 分析每个页面的 template 和 script 部分
3. 提取组件依赖 - 识别自定义组件（排除原生组件）
4. 递归分析组件 - 分析组件的子组件依赖
5. 统计使用频率 - 计算每个组件被引用的次数
6. 分析页面跳转 - 提取 uni.navigateTo 等跳转API
7. 生成多格式报告 - 输出 Markdown、JSON、CSV、HTML 等格式

❓ 常见问题

Q: 为什么某些组件没有被统计？

A: 工具只统计自定义组件（.vue 文件），自动过滤以下内容：

• uniapp 原生组件（view、text、button等）
• HTML 标签（div、span等）
• uni-ui 组件（uni-、u- 前缀）

Q: 如何排除特定目录？

A: 修改 lib/config.js 中的 exclude 配置。

Q: 支持分包吗？

A: 支持！工具会自动分析 pages.json 中的 subPackages 配置。

Q: 交互式图表无法显示？

A: 请确保浏览器能访问 CDN（ECharts），或在本地部署 ECharts 资源。

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

👨‍💻 作者

Your Name - [email protected]

🔗 相关链接

• GitHub 仓库
• 问题反馈
• 更新日志

如果这个工具对你有帮助，请给个 ⭐️ Star 支持一下！