Vite 项目的 Web Vitals 与性能监控：指标采集、构建期埋点与 RUM 上报

LCP 差 → 首屏资源太重、关键 CSS 未内联、图片未优化
INP 差 → 主线程被长任务占用、事件处理过重
CLS 差 → 图片无尺寸、字体加载抖动、动态插入内容

import { onLCP, onINP, onCLS } from 'web-vitals'

function report(metric) {
  console.log(metric.name, metric.value, metric.rating)
}

onLCP(report)
onINP(report)
onCLS(report)

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // largest-contentful-paint / layout-shift / event
    console.log(entry.entryType)
  }
}).observe({ type: 'largest-contentful-paint', buffered: true })

LCP   → 页面隐藏或首次交互后最终确定
INP   → 整段会话中持续更新，取最差交互
CLS   → 会话窗口内累计，页面隐藏时最终确定

export default defineConfig({
  define: {
    __BUILD_VERSION__: JSON.stringify(process.env.GIT_SHA ?? 'dev'),
  },
})

// 上报时带上版本
sendBeacon('/rum', JSON.stringify({ name, value, version: __BUILD_VERSION__ }))

if (import.meta.env.PROD) {
  const { initRUM } = await import('./rum')
  initRUM()
}

const RUM_ENDPOINT = import.meta.env.VITE_RUM_ENDPOINT

function send(payload: object) {
  const body = JSON.stringify(payload)
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/rum', body)
  } else {
    fetch('/rum', { method: 'POST', body, keepalive: true })
  }
}

const SAMPLE_RATE = 0.1
const sampled = Math.random() < SAMPLE_RATE
if (sampled) send(metric)

const queue: object[] = []
function enqueue(metric: object) {
  queue.push(metric)
  if (queue.length >= 5) flush()
}
function flush() {
  if (queue.length) send({ metrics: queue.splice(0) })
}

import { onLCP } from 'web-vitals/attribution'

onLCP((metric) => {
  console.log(metric.attribution)
  // element: 最大内容元素
  // url: 触发 LCP 的资源
  // timeToFirstByte / resourceLoadDelay ...
})

归因 url: /assets/hero-a1b2c3.webp
→ 在产物清单里定位到具体文件与体积
→ 决定是压缩图片还是改懒加载

// lighthouserc.js
module.exports = {
  ci: {
    collect: { staticDistDir: './dist', numberOfRuns: 3 },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
      },
    },
  },
}

- 首屏 JS ≤ 170KB（gzip）
- 首屏 CSS ≤ 30KB（gzip）
- LCP 资源 ≤ 200KB
- Lighthouse 性能分 ≥ 0.9

# 看首屏入口 chunk 大小
ls -la dist/assets/index-*.js dist/assets/index-*.css

# 看产物构成
npx vite build --report

每次发布记录：
  - 入口 JS/CSS 的 gzip 体积
  - 首屏异步 chunk 数量
  - 最大资源体积
与上一版本对比，超过阈值即告警

{
  "version": "a1b2c3",
  "metrics": [
    { "name": "LCP", "value": 2340, "rating": "good", "url": "/home" },
    { "name": "INP", "value": 180, "rating": "good", "url": "/home" }
  ]
}

p75  → 大多数用户的体验
p95  → 尾部体验（易被忽略但影响口碑）

- 按版本对比（本次发布是否回归）
- 按页面路由对比（哪个页面最慢）
- 按设备类型对比（移动端通常更差）
- 按地理区域对比（CDN 覆盖差异）

第一道：Lighthouse CI 断言（合并前拦截明显回归）
第二道：产物体积基线对比（构建后对比阈值）
第三道：RUM 版本对比（发布后看 p75 是否恶化）

□ 生产环境启用 RUM，开发态自动关闭
□ 构建版本号已注入上报数据
□ 上报走 sendBeacon 且按会话采样
□ 指标在 visibilitychange 时补报
□ Lighthouse CI 已配置性能预算断言
□ 每次发布记录入口 JS/CSS 体积基线
□ 看板按版本、路由、设备、区域切分

采集要准（可见性补报 + 会话采样）
上报要轻（beacon + 批量）
归因要细（元素与资源 URL）
门禁要硬（CI 断言 + 体积基线）