// 路由级代码分割（React示例）
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

// 自定义hook：可见时才加载组件
function useLazyLoad(threshold = 0.1) {
  const ref = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(entry.target);
        }
      },
      { threshold }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

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

  return [ref, isVisible];
}

// 使用示例
function HeavyChart() {
  const [ref, isVisible] = useLazyLoad();

  return (
    <div ref={ref}>
      {isVisible ? <RealChartComponent /> : <Skeleton />}
    </div>
  );
}

// 防抖：搜索输入框
function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 节流：滚动事件
function throttle(fn, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

// 使用示例
const searchInput = document.querySelector('#search');
searchInput.addEventListener('input', debounce(handleSearch, 300));

window.addEventListener('scroll', throttle(handleScroll, 100));

// 在生产环境中监控Core Web Vitals
function reportWebVitals() {
  // LCP
  new PerformanceObserver((list) => {
    const entries = list.getEntries();
    const lastEntry = entries[entries.length - 1];
    console.log('LCP:', lastEntry.startTime);
    // 发送到监控服务
    analytics.track('LCP', { value: lastEntry.startTime });
  }).observe({ type: 'largest-contentful-paint', buffered: true });

  // INP
  new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      const duration = entry.duration;
      console.log('INP:', duration);
      analytics.track('INP', { value: duration });
    }
  }).observe({ type: 'event', buffered: true });

  // CLS
  let clsScore = 0;
  new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (!entry.hadRecentInput) {
        clsScore += entry.value;
      }
    }
    console.log('CLS:', clsScore);
  }).observe({ type: 'layout-shift', buffered: true });
}

// 页面加载后开始监控
if ('PerformanceObserver' in window) {
  reportWebVitals();
}