@tianyio/quality-helper/templates/configs/docs/性能监控和分析指南.md

A comprehensive quality helper tool for project scaffolding and management

# 性能监控和分析指南

本文档详细说明了项目中集成的性能监控和分析工具，以及如何使用它们来优化应用性能。

## 1. 性能监控工具

### 1.1 Web Vitals 集成

项目已集成 [web-vitals](https://github.com/GoogleChrome/web-vitals)
库，用于监控核心 Web 指标：

- **CLS (Cumulative Layout Shift)** - 累积布局偏移
- **FCP (First Contentful Paint)** - 首次内容绘制
- **INP (Interaction to Next Paint)** - 交互到下次绘制（替代 FID）
- **LCP (Largest Contentful Paint)** - 最大内容绘制
- **TTFB (Time to First Byte)** - 首字节时间

### 1.2 使用方法

在应用入口文件中集成基础性能监控：

```typescript
import { initPerformanceMonitor } from '@tianyio/fast-util-lib'

// 初始化性能监控
const monitor = initPerformanceMonitor({
  onReport: metric => {
    // 自定义上报逻辑
    console.log(metric)
  },
})
```

### 1.3 性能监控工具模块功能

性能监控工具模块提供了以下功能：

1. **核心 Web 指标监控**：
   - CLS、FCP、INP、LCP、TTFB 指标收集
   - 自定义上报回调

2. **自定义性能标记**：
   - `markPerformanceEvent` - 标记自定义性能事件
   - `measurePerformance` - 测量两个标记之间的时间

3. **资源性能监控**：
   - `getResourcePerformance` - 获取资源加载性能
   - `getFirstScreenRenderTime` - 获取首屏渲染时间

## 2. 构建产物分析工具

### 2.1 Rollup Plugin Visualizer

使用 [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer)
进行构建产物分析。

#### 使用方法：

```bash
# 启用构建分析
ANALYZE=true pnpm build
```

构建完成后会自动生成 `dist/stats.html`
文件，可在浏览器中打开查看详细的构建产物分析报告。

## 3. 代码分割策略

### 3.1 动态代码分割

项目采用智能动态代码分割策略，Vite 会自动处理代码分割。

### 3.2 手动代码分割配置

在 `vite.config.ts` 中可以配置手动分割策略：

```javascript
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // Vue 核心库
          vue: ['vue'],
          // 路由库
          router: ['vue-router'],
          // 状态管理
          pinia: ['pinia'],
          // 工具库
          utils: ['@tianyio/fast-util-lib'],
        },
      },
    },
  },
})
```

## 4. 性能优化建议

### 4.1 构建优化

1. **Tree Shaking**：
   - 确保使用 ES 模块导入
   - 避免副作用代码

2. **代码压缩**：
   - 使用 Terser 进行代码压缩
   - 移除调试代码和未使用代码

3. **构建报告**：
   - 启用 `reportCompressedSize: true`

### 4.2 运行时优化

1. **懒加载**：
   - 路由组件懒加载
   - 动态导入大型依赖
   - 按需加载功能模块

2. **缓存策略**：
   - 合理设置 HTTP 缓存头
   - 使用 Service Worker 缓存静态资源
   - 实现客户端数据缓存

3. **资源优化**：
   - 图片压缩和格式优化
   - 字体加载优化
   - CSS 和 JavaScript 资源优化

## 5. 监控指标解读

### 5.1 核心 Web 指标

| 指标 | 目标值  | 说明                           |
| ---- | ------- | ------------------------------ |
| LCP  | < 2.5s  | 衡量加载性能，最大内容绘制时间 |
| INP  | < 200ms | 衡量交互性，交互到下次绘制时间 |
| CLS  | < 0.1   | 衡量视觉稳定性，累积布局偏移   |

## 6. 性能问题诊断流程

### 6.1 构建性能问题诊断

1. **使用构建分析工具**：

   ```bash
   ANALYZE=true pnpm build
   ```

   查看构建产物大小分布，识别过大的依赖包。

2. **检查代码分割效果**：
   - 确认依赖是否正确分割
   - 检查重复依赖问题

### 6.2 运行时性能问题诊断

1. **使用浏览器开发者工具**：
   - Performance 面板分析运行时性能
   - Network 面板分析资源加载性能

2. **使用性能监控工具**：

   ```typescript
   import { mark, measure } from '@tianyio/fast-util-lib'

   // 标记关键性能点
   mark('app-start')
   // ... 应用初始化代码
   mark('app-loaded')

   // 测量关键路径时间
   measure('app-load-time', 'app-start', 'app-loaded')
   ```

通过这些工具和策略，可以有效监控和优化应用性能，确保提供流畅的用户体验。