const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.entryType, entry.startTime, entry.duration);
  }
});

// 開始監聽特定類型的性能條目
observer.observe({ entryTypes: ['resource', 'navigation', 'paint'] });

let lcpReported = false;

new PerformanceObserver((entryList) => {
  const lcpEntry = entryList.getEntries().at(-1); // 取最後一個（最準確）
  if (!lcpReported) {
    console.log('LCP:', lcpEntry.startTime); // 單位：毫秒
    // 上報到分析平台
    sendToAnalytics({ metric: 'LCP', value: lcpEntry.startTime });
    lcpReported = true;
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

let clsValue = 0;

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) { // 忽略用户交互後的偏移
      clsValue += entry.value;
    }
  }
  console.log('當前 CLS:', clsValue);
}).observe({ type: 'layout-shift', buffered: true });

new PerformanceObserver((list) => {
  for (const resource of list.getEntries()) {
    if (resource.duration > 2000) {
      console.warn('慢資源:', resource.name, resource.duration + 'ms');
      // 上報性能問題
    }
  }
}).observe({ entryTypes: ['resource'] });

new PerformanceObserver((list) => {
  for (const task of list.getEntries()) {
    if (task.duration > 100) {
      console.log('長任務:', task.duration + 'ms', task.attribution);
    }
  }
}).observe({ entryTypes: ['longtask'] });

if (PerformanceObserver.supportedEntryTypes.includes('longtask')) {
  // 啓用觀察
}

npm install web-vitals

// hooks/useWebVitals.ts
import { useEffect } from 'react';
import { getCLS, getFCP, getLCP, getFID, getINP } from 'web-vitals';

type WebVitalsMetric = {
  id: string;
  name: string;
  value: number;
  delta: number;
  entries: PerformanceEntry[];
  attribution: Record<string, unknown>;
};

type WebVitalsOptions = {
  onReport?: (metric: WebVitalsMetric) => void;
  reportAll?: boolean; // 是否上報所有指標（默認只上報一次）
};

export const useWebVitals = ({
  onReport,
  reportAll = false
}: WebVitalsOptions = {}) => {
  useEffect(() => {
    // 定義上報函數
    const report = (metric: WebVitalsMetric) => {
      onReport?.(metric);
      if (process.env.NODE_ENV === 'development') {
        console.log('Web Vitals:', metric);
      }
    };

    // 啓動監聽（Web Vitals 內部使用 PerformanceObserver）
    getCLS(report, reportAll);
    getFCP(report, reportAll);
    getLCP(report, reportAll);
    getFID(report); // FID 只觸發一次
    getINP(report, reportAll); // INP 替代 FID（未來標準）

    // 注意：web-vitals 的指標是自動管理生命週期的，無需 cleanup
  }, [onReport, reportAll]);
};

// App.tsx
import { useWebVitals } from './hooks/useWebVitals';

function App() {
  useWebVitals({
    onReport: (metric) => {
      // 上報到分析平台（如 GA4、Sentry、自建 API）
      fetch('/api/performance', {
        method: 'POST',
        body: JSON.stringify(metric),
        headers: { 'Content-Type': 'application/json' }
      });
    }
  });

  return <div>你的應用</div>;
}

// composables/useWebVitals.ts
import { onMounted } from 'vue';
import { getCLS, getFCP, getLCP, getFID, getINP } from 'web-vitals';

type WebVitalsMetric = {
  id: string;
  name: string;
  value: number;
  delta: number;
  entries: PerformanceEntry[];
  attribution: Record<string, unknown>;
};

export function useWebVitals(
  onReport?: (metric: WebVitalsMetric) => void,
  reportAll = false
) {
  onMounted(() => {
    const report = (metric: WebVitalsMetric) => {
      onReport?.(metric);
      if (import.meta.env.DEV) {
        console.log('Web Vitals:', metric);
      }
    };

    getCLS(report, reportAll);
    getFCP(report, reportAll);
    getLCP(report, reportAll);
    getFID(report);
    getINP(report, reportAll);
  });
}

<!-- App.vue -->
<script setup>
import { useWebVitals } from './composables/useWebVitals';

useWebVitals((metric) => {
  fetch('/api/performance', {
    method: 'POST',
    body: JSON.stringify(metric),
    headers: { 'Content-Type': 'application/json' }
  });
});
</script>

<template>
  <div>你的應用</div>
</template>

// hooks/useResourcePerformance.ts
import { useEffect } from 'react';

export const useResourcePerformance = (onSlowResource: (entry: PerformanceResourceTiming) => void) => {
  useEffect(() => {
    if (!PerformanceObserver.supportedEntryTypes.includes('resource')) return;

    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries() as PerformanceResourceTiming[]) {
        if (entry.duration > 2000) {
          onSlowResource(entry);
        }
      }
    });

    observer.observe({ entryTypes: ['resource'] });

    return () => {
      observer.disconnect();
    };
  }, [onSlowResource]);
};