可视化分析 Angular 构建过程中的内存使用和耗时趋势，帮助开发者优化构建性能。
| 时间分析 | 内存分析 | 智能洞察 |
|---|---|---|
| 📈 编译阶段耗时趋势 | 💾 Heap 使用峰值 | 🔍 自动识别极值点 |
| 📈 优化阶段耗时趋势 | 💾 RSS 内存峰值 | 📉 动态参考线 |
| 📈 总构建耗时趋势 | 📊 内存使用率分析 | 🔄 配置差异对比 |
- 双图表联动：同步显示时间与内存分析
- 智能提示：悬停显示构建配置详情
- 灵活布局：支持水平/垂直布局切换
- 数据接入：支持文件拖拽/粘贴JSON
- 弹出模式：支持自动/手动弹出详情面板
- 数据筛选：支持多种时间范围筛选
- 双击交互：手动模式下双击图表查看详情
- 现代浏览器（推荐 Chrome 90+）
- Node.js 14+（仅插件开发需要）
- Angular 12+ 项目（数据采集需要）
# 使用示例数据快速体验 1. 点击「下载示例文件」获取测试数据 2. 拖拽上传 build-memory-records.json 或点击选择文件 3. 悬停图表查看详细分析指标 4. 切换布局模式查看不同展示效果 5. 使用筛选器查看特定时间范围的数据git clone https://github.com/yourname/angular-build-memory-analytics.git cd angular-build-memory-analytics # 开发模式（带热更新） npx live-server --port=3000 # 生产构建 npm run build// webpack.config.js const MemoryMonitorPlugin = require('./memory-monitor-plugin'); module.exports = { plugins: [ new MemoryMonitorPlugin({ maxRecords: 20, // 最大记录数 }) ] }{ "timestamp": "2025-03-10 16:48:01", "totalTime": "3min 24s", "status": "success", "buildConfigurations": { "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "extractLicenses": true, "vendorChunk": true, "buildOptimizer": true }, "ngCacheInfo": { "enabled": true, "environment": "all", "path": "E:\\work\\code\\project\\.angular\\cache", "sizeOnDisk": "1006.24 MB", "effectiveStatus": "enabled" }, "deviceInfo": { "hostname": "DESKTOP-HEK6UKM", "platform": "win32", "osType": "Windows_NT", "cpuModel": "Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz", "cpuCount": 4, "totalMemory": "15.89 GB", "freeMemory": "2.67 GB" }, "data": [ { "阶段": "编译", "阶段耗时": "21s", "RSS峰值 (MB)": 946, "Heap总峰值 (MB)": 821, "Heap已用峰值 (MB)": 776, "内存使用率峰值": "5.95%", "Heap使用率峰值": "94.46%" }, { "阶段": "优化&打包", "阶段耗时": "1min 40s", "RSS峰值 (MB)": 3288, "Heap总峰值 (MB)": 2531, "Heap已用峰值 (MB)": 2467, "内存使用率峰值": "20.21%", "Heap使用率峰值": "97.44%" } ] }- 文件上传：点击或拖拽上传
JSON文件 - 文本粘贴：点击切换按钮，粘贴
JSON数据到文本框
-
布局切换：点击"布局"按钮在横向/竖向布局间切换
-
弹出详情
：选择自动/手动模式显示详情面板
- 自动模式：悬停图表自动显示详情
- 手动模式：双击图表显示详情
-
数据筛选
：选择不同时间范围查看数据
- 全部/最早7天/最早15天/最早10次
- 最近7天/最近15天/最近10次
-
图表联动：两个图表同步显示相同时间点数据
- 显示构建配置信息
- 显示Angular缓存信息（如果有）
- 显示设备信息（如果有）
- 自动高亮显示配置变更
# 提升Node内存限制 NODE_OPTIONS="--max-old-space-size=4096" ng build --prod # 启用并行构建 ng build --parallel --threads=4// angular.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "cli": { "cache": { "enabled": true, "path": ".angular-cache", // 缓存存储路径（可选） "environment": "all" // 缓存所有环境（包括生产） } }, "projects": { "your-project-name": { // ...其他配置 } } }- 创建特性分支
git checkout -b feature/enhance-charts- 提交变更说明
git commit -m "feat: add 3D visualization support"- 推送并创建 Pull Request
TypeScript 4.0+语法ECharts 5.x图表规范Airbnb JavaScript代码风格
本项目采用 MIT License，可自由用于商业项目。使用请保留原始署名。