页面加载记录

"web-vitals": "^5.1.0"

main.ts:
import { initWebVitals } from '@/utils/webVitals' // 性能监听，不需要时可以删除，不影响加载速度
initWebVitals((metric) => {
  console.log('[WebVitals]', metric)
})

/* 性能监控（关键） */
function onWindowLoad(cb: () => void) {
  if (document.readyState === 'complete') {
    cb()
  } else {
    window.addEventListener('load', cb, { once: true })
  }
}

onWindowLoad(() => {
  console.log('🚀 页面 load 完成，1s 后分析资源')

  setTimeout(() => {
    const resources = performance.getEntriesByType(
      'resource'
    ) as PerformanceResourceTiming[]

    console.log(`📦 共加载资源数量：${resources.length}`)

    const formatted = resources.map(r => ({
      name: r.name,
      type: r.initiatorType,
      duration: Math.round(r.duration) + 'ms',
      size: r.transferSize
        ? (r.transferSize / 1024).toFixed(1) + 'kb'
        : '-',
      encoded: r.encodedBodySize
        ? (r.encodedBodySize / 1024).toFixed(1) + 'kb'
        : '-',
    }))

    console.table(formatted)

    // 再单独打印真正的慢资源
    const slow = resources.filter(r => r.duration > 2000)

    if (slow.length) {
      console.warn('🐢 慢资源（>2s）')
      console.table(
        slow.map(r => ({
          name: r.name,
          duration: Math.round(r.duration) + 'ms',
          type: r.initiatorType,
        }))
      )
    } else {
      console.log('✅ 没有超过 2s 的资源')
    }
  }, 1000)
})