🚀 前端性能分析完全指南

// ✅ 1. 使用 <picture> 标签 — 格式兼容 + 响应式图片
<picture>
  <!-- 浏览器按顺序选第一个能识别的格式 -->
  <source srcset="/banner.avif" type="image/avif">
  <source srcset="/banner.webp" type="image/webp">
  <img src="/banner.jpg" alt="页面Banner"
       width="1200" height="400"
       loading="lazy"              // 非首屏图片懒加载
       decoding="async">          // 异步解码
</picture>

// ✅ 2. 响应式图片 — 不同屏幕加载不同大小
<img srcset="/product-300.webp 300w,
             /product-600.webp 600w,
             /product-1200.webp 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     src="/product-600.webp" alt="商品图片">
// 浏览器自动选择最适合当前屏幕大小的图片

// ✅ 3. 图片压缩命令行工具
// 安装: npm install -g sharp-cli
// 批量转WebP:
sharp -i "./images/*.jpg" -f webp -o "./images/webp/" --quality 80

// ✅ 4. Vite构建时自动压缩图片
// npm install vite-plugin-imagemin
import viteImagemin from 'vite-plugin-imagemin'
export default {
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      pngquant: { quality: [0.8, 0.9] },
      svgo: { plugins: [{ name: 'removeViewBox' }] },
      webp: { quality: 80 }  // 自动生成WebP版本
    })
  ]
}

// ✅ Nginx 缓存配置（生产最常用）

// 1. 带hash的静态资源（JS/CSS/字体）— 永久缓存
// 文件名如 main.a3f8b2c.js — 改了文件hash就变了，缓存自然失效
location /assets/ {
  expires 1y;                          // 1年强缓存
  add_header Cache-Control "public, immutable";  // immutable=永远不验证
  // 用户只要不删缓存，永远不发请求！
}

// 2. HTML文件 — 不缓存或短缓存
location / {
  add_header Cache-Control "no-cache";  // 每次都协商缓存
  // 因为HTML里引用了带hash的JS/CSS路径，HTML变了就会加载新的JS/CSS
}

// 3. API接口 — 不缓存
location /api/ {
  add_header Cache-Control "no-store";  // 完全不缓存
  // 每次都要拿最新数据
}

// ✅ 协商缓存的两种方式（Nginx自动处理）

// 方式1: ETag（文件内容hash）
// 响应头: ETag: "abc123"
// 下次请求头: If-None-Match: "abc123"
// 服务器比对ETag，一样就返回304

// 方式2: Last-Modified（最后修改时间）
// 响应头: Last-Modified: Thu, 12 Jun 2026 08:00:00 GMT
// 下次请求头: If-Modified-Since: Thu, 12 Jun 2026 08:00:00 GMT
// 服务器比对时间，没改就返回304

// ✅ 使用 web-vitals 库（Google官方出品）
// npm install web-vitals
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

// 采集指标并上报
function reportMetric(metric) {
  const { name, value, rating } = metric;
  // name: 'LCP' | 'INP' | 'CLS' | 'FCP' | 'TTFB'
  // value: 具体数值（ms或分数）
  // rating: 'good' | 'needs-improvement' | 'poor'

  // 用 navigator.sendBeacon 上报（页面关闭也能发出去）
  const body = JSON.stringify({
    name, value, rating,
    url: location.href,
    userAgent: navigator.userAgent,
    timestamp: Date.now(),
    // 可以加自定义维度
    userId: getCurrentUserId(),
    pageType: 'product-list',
  });

  navigator.sendBeacon('/api/perf-report', body);

  // 或者用 Image 打点（更兼容）
  // new Image().src = `/api/perf.gif?name=${name}&value=${value}&rating=${rating}`;
}

// 注册监听
onLCP(reportMetric);   // 最大内容渲染
onINP(reportMetric);   // 交互延迟
onCLS(reportMetric);   // 布局偏移
onFCP(reportMetric);   // 首次内容绘制
onTTFB(reportMetric);  // 首字节时间

// ✅ Sentry 初始化（已有错误监控的项目加几行就行）
import * as Sentry from '@sentry/vue';

Sentry.init({
  dsn: 'https://xxx@sentry.io/123',
  integrations: [
    Sentry.browserTracingIntegration(),   // 性能追踪
    Sentry.replayIntegration(),           // 用户行为回放
  ],
  tracesSampleRate: 0.1,   // 采样10%（全采太贵）
  // 自动采集: 页面加载、接口请求、用户操作的性能数据

  // 设置用户信息
  initialScope: {
    user: { id: getCurrentUserId() },
    tags: { env: 'production' },
  },
});

// Sentry 自动采集的指标:
// - Web Vitals (LCP, FID, CLS, TTFB)
// - 接口请求耗时
// - 页面路由切换耗时
// - 长任务 (Long Task)
// - 资源加载失败

// ✅ Spring Boot 后端接收性能数据
@RestController
@RequestMapping("/api/perf")
public class PerfReportController {

    @Autowired
    private PerfMetricRepository repo;

    @PostMapping("/report")
    public ResponseEntity<Void> report(@RequestBody PerfMetric metric) {
        // 存储：指标名、值、评级、URL、UA、时间戳、用户ID
        repo.save(metric);
        return ResponseEntity.ok().build();
    }
}

// ✅ 管理后台查看性能数据
// SQL示例: 查看各页面的LCP P75（第75百分位）— 这才是真实用户体验
// SELECT
//   url,
//   PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY value) as p75_lcp,
//   COUNT(*) as sample_count
// FROM perf_metrics
// WHERE name = 'LCP'
//   AND timestamp >= NOW() - INTERVAL '7 days'
// GROUP BY url
// ORDER BY p75_lcp DESC;