analyze frontend structure 是一款专为前端开发者设计的智能项目结构分析工具，能够自动扫描任意前端项目的目录结构，识别路由配置与模块划分，并生成标准化的模块页面映射文档。该工具支持 Vue、React、Angular、Svelte、Solid 等多种主流前端框架，无需人工干预即可自动适配不同项目的组织方式。通过深度解析路由文件和组件依赖关系，它能准确还原项目的层级结构与导航逻辑，为后续的代码维护、文档生成或系统重构提供清晰的结构化视图。其核心优势在于通用性强、自动化程度高，尤其适合在多框架混合开发环境或需要快速理解遗留项目结构的场景中使用。
核心功能特点
- 自动识别并解析多种前端框架的路由配置文件，提取路径与组件映射关系
- 基于目录结构和组件引用关系智能划分项目模块，支持跨框架识别
- 生成标准化的模块-页面映射文档，包含父子层级和嵌套结构信息
- 输出格式灵活，支持 JSON、Markdown 和 HTML 等多种形式
- 生成的映射文档可直接集成至智能导航系统，实现快速定位与跳转
适用场景
该工具特别适合在以下场景中应用：当团队接手一个使用 React Router 或 Vue Router 构建的复杂单页应用时，可通过一键扫描快速掌握其页面层级与权限路由设计；在微前端架构下，多个子应用可能采用不同技术栈，此工具能统一分析各子系统的模块边界与通信接口，辅助集成与调试；对于长期维护的大型前端项目，定期运行该工具可生成结构变更报告，帮助开发者追踪模块演化趋势，避免因结构混乱导致的维护成本上升。此外，在编写自动化测试脚本或构建可视化站点地图时，标准化的映射文档也能显著提升开发效率。无论是新项目初始化还是旧系统重构，它都能成为理解和管理前端架构的有力助手。