09db05c448
- 移动42个文档文件到 docs/ 目录 - 更新 .gitignore 允许 docs/ 下的 .md 文件 - 删除根目录下的重复文档文件 📁 文档分类： - StockDetailPanel 重构文档（3个） - PostHog 集成文档（6个） - 系统架构和API文档（33个） 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
455 lines
11 KiB
Markdown
455 lines
11 KiB
Markdown
# 页面加载性能深度分析报告
|
||
|
||
## 📊 从输入 URL 到页面显示的完整流程分析
|
||
|
||
### 当前性能问题诊断（2025-10-13）
|
||
|
||
---
|
||
|
||
## 🔍 完整加载时间线分解
|
||
|
||
### 阶段 1: DNS 解析 + TCP 连接
|
||
```
|
||
输入 URL: http://localhost:3000
|
||
↓
|
||
DNS 查询 [████] 10-50ms (本地开发: ~5ms)
|
||
TCP 三次握手 [████] 20-100ms (本地开发: ~1ms)
|
||
↓
|
||
总计: 本地 ~6ms, 远程 ~100ms
|
||
```
|
||
|
||
### 阶段 2: HTML 文档请求
|
||
```
|
||
发送 HTTP 请求 [████] 10ms
|
||
服务器处理 [████] 20-50ms
|
||
接收 HTML [████] 10-30ms
|
||
↓
|
||
总计: 40-90ms
|
||
```
|
||
|
||
### 阶段 3: 解析 HTML + 下载资源 ⚠️ **关键瓶颈**
|
||
```
|
||
解析 HTML [████] 50ms
|
||
下载 JavaScript (12.6MB!) [████████████████████] 3000-8000ms ❌
|
||
下载 CSS [████] 200-500ms
|
||
下载图片/字体 [████] 500-1000ms
|
||
↓
|
||
总计: 3750-9550ms (3.7-9.5秒) 🔴 严重性能问题
|
||
```
|
||
|
||
### 阶段 4: JavaScript 执行
|
||
```
|
||
解析 JS [████████] 800-1500ms
|
||
React 初始化 [████] 200-300ms
|
||
AuthContext 初始化 [████] 100ms
|
||
渲染首页组件 [████] 100-200ms
|
||
↓
|
||
总计: 1200-2100ms (1.2-2.1秒)
|
||
```
|
||
|
||
### 阶段 5: 首次内容绘制 (FCP)
|
||
```
|
||
计算样式 [████] 50-100ms
|
||
布局计算 [████] 100-200ms
|
||
绘制 [████] 50-100ms
|
||
↓
|
||
总计: 200-400ms
|
||
```
|
||
|
||
---
|
||
|
||
## ⏱️ 总耗时汇总
|
||
|
||
### 当前性能（未优化）
|
||
|
||
| 阶段 | 耗时 | 占比 | 状态 |
|
||
|-----|------|------|-----|
|
||
| DNS + TCP | 6-100ms | <1% | ✅ 正常 |
|
||
| HTML 请求 | 40-90ms | <1% | ✅ 正常 |
|
||
| **资源下载** | **3750-9550ms** | **70-85%** | 🔴 **瓶颈** |
|
||
| JS 执行 | 1200-2100ms | 10-20% | 🟡 需优化 |
|
||
| 渲染绘制 | 200-400ms | 3-5% | ✅ 可接受 |
|
||
| **总计** | **5196-11740ms** | **100%** | 🔴 **5-12秒** |
|
||
|
||
### 理想性能（优化后）
|
||
|
||
| 阶段 | 耗时 | 改善 |
|
||
|-----|------|-----|
|
||
| DNS + TCP | 6-100ms | - |
|
||
| HTML 请求 | 40-90ms | - |
|
||
| **资源下载** | **500-1500ms** | **⬇️ 75-85%** |
|
||
| JS 执行 | 300-600ms | **⬇️ 50-70%** |
|
||
| 渲染绘制 | 200-400ms | - |
|
||
| **总计** | **1046-2690ms** | **⬇️ 80%** |
|
||
|
||
---
|
||
|
||
## 🔴 核心性能问题
|
||
|
||
### 问题 1: JavaScript 包过大（最严重）
|
||
|
||
#### 当前状态
|
||
```
|
||
总 JS 大小: 12.6MB
|
||
文件数量: 138 个
|
||
最大单文件: 528KB (charts-lib)
|
||
```
|
||
|
||
#### 问题详情
|
||
|
||
**Top 10 最大文件**:
|
||
```
|
||
1. charts-lib-e701750b.js 528KB ← ECharts 图表库
|
||
2. vendors-b1fb8c12.js 212KB ← 第三方库
|
||
3. main-426809f3.js 156KB ← 主应用代码
|
||
4. vendors-d2765007.js 148KB ← 第三方库
|
||
5. main-faddd7bc.js 148KB ← 主应用代码
|
||
6. calendar-lib-9a17235a.js 148KB ← 日历库
|
||
7. react-vendor.js 144KB ← React 核心
|
||
8. main-88d3322f.js 140KB ← 主应用代码
|
||
9. main-2e2ee8f2.js 140KB ← 主应用代码
|
||
10. vendors-155df396.js 132KB ← 第三方库
|
||
```
|
||
|
||
**问题根源**:
|
||
- ❌ 所有页面组件在首屏加载时全部下载
|
||
- ❌ 没有路由级别的懒加载
|
||
- ❌ 图表库（528KB）即使不使用也会下载
|
||
- ❌ 多个重复的 main.js 文件（代码重复打包）
|
||
|
||
---
|
||
|
||
### 问题 2: 同步导入导致的雪崩效应
|
||
|
||
**位置**: `src/routes.js`
|
||
|
||
**问题代码**:
|
||
```javascript
|
||
// ❌ 所有组件同步导入 - 首屏必须下载全部
|
||
import Calendar from "views/Applications/Calendar";
|
||
import DataTables from "views/Applications/DataTables";
|
||
import Kanban from "views/Applications/Kanban.js";
|
||
import Community from "views/Community";
|
||
import LimitAnalyse from "views/LimitAnalyse";
|
||
import ConceptCenter from "views/Concept";
|
||
import TradingSimulation from "views/TradingSimulation";
|
||
// ... 还有 30+ 个组件
|
||
```
|
||
|
||
**影响**:
|
||
- 首页只需要 HomePage 组件
|
||
- 但需要下载所有 30+ 个页面的代码
|
||
- 包括：社区、交易模拟、概念中心、图表、看板等
|
||
- 用户可能永远不会访问这些页面
|
||
|
||
**导入依赖链**:
|
||
```
|
||
HomePage (用户需要)
|
||
↓ 同步导入
|
||
Calendar (不需要, 148KB)
|
||
↓ 引入
|
||
FullCalendar (不需要, ~200KB)
|
||
↓ 引入
|
||
DataTables (不需要, ~100KB)
|
||
↓ 引入
|
||
...
|
||
总计: 下载了 12.6MB，实际只需要 ~500KB
|
||
```
|
||
|
||
---
|
||
|
||
### 问题 3: 图表库冗余加载
|
||
|
||
**分析**:
|
||
- ECharts: ~528KB
|
||
- ApexCharts: 包含在 vendors 中 (~100KB)
|
||
- Recharts: 包含在 vendors 中 (~80KB)
|
||
- D3: 包含在 charts-lib 中 (~150KB)
|
||
|
||
**问题**:
|
||
- 首页不需要任何图表
|
||
- 但加载了 4 个图表库（~858KB）
|
||
- 占总包大小的 6.8%
|
||
|
||
---
|
||
|
||
### 问题 4: 重复的 main.js 文件
|
||
|
||
**观察到的问题**:
|
||
```
|
||
main-426809f3.js 156KB
|
||
main-faddd7bc.js 148KB
|
||
main-88d3322f.js 140KB
|
||
main-2e2ee8f2.js 140KB
|
||
main-142e0172.js 128KB
|
||
main-fa3d7959.js 112KB
|
||
main-6b56ec6d.js 92KB
|
||
```
|
||
|
||
**原因**:
|
||
- 代码分割配置可能有问题
|
||
- 同一个模块被打包到多个 chunk
|
||
- 没有正确复用公共代码
|
||
|
||
---
|
||
|
||
## 📈 性能影响量化
|
||
|
||
### 网络带宽影响
|
||
|
||
| 网络类型 | 速度 | 12.6MB 下载时间 | 500KB 下载时间 |
|
||
|---------|------|----------------|---------------|
|
||
| **5G** | 100 Mbps | 1.0秒 | 0.04秒 |
|
||
| **4G** | 20 Mbps | 5.0秒 | 0.2秒 |
|
||
| **3G** | 2 Mbps | 50秒 | 2秒 |
|
||
| **慢速 WiFi** | 5 Mbps | 20秒 | 0.8秒 |
|
||
|
||
**结论**:
|
||
- 🔴 在 4G 网络下，仅下载 JS 就需要 5秒
|
||
- 🔴 在 3G 网络下，几乎无法使用（50秒）
|
||
- ✅ 优化后，即使在 3G 下也可接受（2秒）
|
||
|
||
---
|
||
|
||
### 解析执行时间影响
|
||
|
||
| 设备 | 解析 12.6MB | 解析 500KB | 节省 |
|
||
|-----|------------|-----------|------|
|
||
| **高端手机** | 1.5秒 | 0.06秒 | 1.44秒 |
|
||
| **中端手机** | 3.0秒 | 0.12秒 | 2.88秒 |
|
||
| **低端手机** | 6.0秒 | 0.24秒 | 5.76秒 |
|
||
|
||
**结论**:
|
||
- 🔴 在中端手机上，仅解析 JS 就需要 3秒
|
||
- ✅ 优化后可节省 2.88秒（96% 提升）
|
||
|
||
---
|
||
|
||
## 🎯 优化方案与预期效果
|
||
|
||
### 优化 1: 实施路由懒加载（最重要）⭐⭐⭐⭐⭐
|
||
|
||
**方案**:
|
||
```javascript
|
||
// ✅ 使用 React.lazy() 懒加载
|
||
const Community = React.lazy(() => import('views/Community'));
|
||
const LimitAnalyse = React.lazy(() => import('views/LimitAnalyse'));
|
||
const ConceptCenter = React.lazy(() => import('views/Concept'));
|
||
// ...
|
||
```
|
||
|
||
**预期效果**:
|
||
- 首屏 JS: 从 12.6MB → 500-800KB ⬇️ **93%**
|
||
- 首屏加载: 从 5-12秒 → 1-2秒 ⬇️ **80%**
|
||
- FCP: 从 3-5秒 → 0.5-1秒 ⬇️ **75%**
|
||
|
||
**实施难度**: 🟢 简单（1-2小时）
|
||
|
||
---
|
||
|
||
### 优化 2: 图表库按需加载 ⭐⭐⭐⭐
|
||
|
||
**方案**:
|
||
```javascript
|
||
// ✅ 只在需要时导入
|
||
const ChartsPage = React.lazy(() => import('views/Pages/Charts'));
|
||
// ECharts 会被自动分割到 ChartsPage 的 chunk
|
||
```
|
||
|
||
**预期效果**:
|
||
- 首屏去除图表库：⬇️ 858KB
|
||
- 图表页面首次访问增加 0.5-1秒（可接受）
|
||
|
||
**实施难度**: 🟢 简单（包含在路由懒加载中）
|
||
|
||
---
|
||
|
||
### 优化 3: 代码分割优化 ⭐⭐⭐
|
||
|
||
**方案**:
|
||
```javascript
|
||
// craco.config.js 已配置，但需要验证
|
||
splitChunks: {
|
||
chunks: 'all',
|
||
maxSize: 244000,
|
||
cacheGroups: {
|
||
react: { priority: 30 },
|
||
charts: { priority: 25 },
|
||
// ...
|
||
}
|
||
}
|
||
```
|
||
|
||
**检查项**:
|
||
- ✅ 是否有重复的 main.js
|
||
- ✅ 公共模块是否正确提取
|
||
- ✅ vendor 分割是否合理
|
||
|
||
**实施难度**: 🟡 中等（需要调试配置）
|
||
|
||
---
|
||
|
||
### 优化 4: 使用 Suspense 添加加载状态 ⭐⭐
|
||
|
||
**方案**:
|
||
```javascript
|
||
<Suspense fallback={<LoadingSpinner />}>
|
||
<Routes>
|
||
<Route path="/community" element={<Community />} />
|
||
</Routes>
|
||
</Suspense>
|
||
```
|
||
|
||
**预期效果**:
|
||
- 用户体验改善：显示加载动画而非白屏
|
||
- 不改变实际加载时间，但感知性能更好
|
||
|
||
**实施难度**: 🟢 简单（30分钟）
|
||
|
||
---
|
||
|
||
## 📋 优化优先级建议
|
||
|
||
### 立即实施（P0）🔴
|
||
|
||
1. **路由懒加载** - 效果最显著（80% 性能提升）
|
||
2. **移除首页不需要的图表库** - 快速见效
|
||
|
||
### 短期实施（P1）🟡
|
||
|
||
3. **代码分割优化** - 清理重复打包
|
||
4. **添加 Suspense 加载状态** - 提升用户体验
|
||
|
||
### 中期实施（P2）🟢
|
||
|
||
5. **预加载关键资源** - 进一步优化
|
||
6. **图片懒加载** - 减少首屏资源
|
||
7. **Service Worker 缓存** - 二次访问加速
|
||
|
||
---
|
||
|
||
## 🧪 性能优化后的预期结果
|
||
|
||
### 首屏加载时间对比
|
||
|
||
| 网络 | 优化前 | 优化后 | 改善 |
|
||
|-----|-------|-------|------|
|
||
| **5G** | 2-3秒 | 0.5-1秒 | ⬇️ 67% |
|
||
| **4G** | 6-8秒 | 1.5-2.5秒 | ⬇️ 70% |
|
||
| **3G** | 50-60秒 | 3-5秒 | ⬇️ 92% |
|
||
|
||
### 各阶段优化后时间
|
||
|
||
```
|
||
DNS + TCP [██] 6-100ms (不变)
|
||
HTML 请求 [██] 40-90ms (不变)
|
||
资源下载 [████] 500-1500ms (从 3750-9550ms，⬇️ 85%)
|
||
JS 执行 [███] 300-600ms (从 1200-2100ms，⬇️ 60%)
|
||
渲染绘制 [██] 200-400ms (不变)
|
||
-----------------------------------------------
|
||
总计: 1046-2690ms (从 5196-11740ms，⬇️ 80%)
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 Lighthouse 分数预测
|
||
|
||
### 优化前
|
||
|
||
```
|
||
Performance: 🔴 25-45
|
||
- FCP: 3.5s
|
||
- LCP: 5.2s
|
||
- TBT: 1200ms
|
||
- CLS: 0.05
|
||
```
|
||
|
||
### 优化后
|
||
|
||
```
|
||
Performance: 🟢 85-95
|
||
- FCP: 0.8s ⬆️ 77%
|
||
- LCP: 1.5s ⬆️ 71%
|
||
- TBT: 200ms ⬆️ 83%
|
||
- CLS: 0.05 (不变)
|
||
```
|
||
|
||
---
|
||
|
||
## 🛠️ 实施步骤
|
||
|
||
### 第一步：路由懒加载（最关键）
|
||
|
||
1. 修改 `src/routes.js`
|
||
2. 将所有 import 改为 React.lazy
|
||
3. 添加 Suspense 边界
|
||
4. 测试所有路由
|
||
|
||
**预计时间**: 1-2 小时
|
||
**预期效果**: 首屏速度提升 80%
|
||
|
||
### 第二步：验证代码分割
|
||
|
||
1. 运行 `npm run build:analyze`
|
||
2. 检查打包结果
|
||
3. 优化重复模块
|
||
4. 调整 splitChunks 配置
|
||
|
||
**预计时间**: 1 小时
|
||
**预期效果**: 包大小减少 10-15%
|
||
|
||
### 第三步：性能测试
|
||
|
||
1. 使用 Lighthouse 测试
|
||
2. 使用 WebPageTest 测试
|
||
3. 真机测试（4G 网络）
|
||
4. 收集用户反馈
|
||
|
||
**预计时间**: 30 分钟
|
||
|
||
---
|
||
|
||
## 💡 监控建议
|
||
|
||
### 关键指标
|
||
|
||
1. **FCP (First Contentful Paint)** - 目标 <1秒
|
||
2. **LCP (Largest Contentful Paint)** - 目标 <2秒
|
||
3. **TTI (Time to Interactive)** - 目标 <3秒
|
||
4. **总包大小** - 目标 <1MB（首屏）
|
||
|
||
### 监控工具
|
||
|
||
- Chrome DevTools Performance
|
||
- Lighthouse CI
|
||
- WebPageTest
|
||
- Real User Monitoring (RUM)
|
||
|
||
---
|
||
|
||
## 📝 总结
|
||
|
||
### 当前主要问题
|
||
|
||
🔴 **JavaScript 包过大**（12.6MB）
|
||
🔴 **所有路由同步加载**
|
||
🔴 **首屏加载 5-12 秒**
|
||
|
||
### 核心解决方案
|
||
|
||
✅ **实施路由懒加载** → 减少 93% 首屏 JS
|
||
✅ **按需加载图表库** → 减少 858KB
|
||
✅ **优化代码分割** → 消除重复
|
||
|
||
### 预期结果
|
||
|
||
⚡ **首屏时间**: 5-12秒 → 1-2.7秒 (**⬇️ 80%**)
|
||
⚡ **JavaScript**: 12.6MB → 500KB (**⬇️ 96%**)
|
||
⚡ **Lighthouse**: 25-45 → 85-95 (**⬆️ 100%+**)
|
||
|
||
---
|
||
|
||
**报告生成时间**: 2025-10-13
|
||
**分析工具**: Build 分析 + 性能理论计算
|
||
**下一步**: 实施路由懒加载优化
|