16. 性能优化和监控

// 简化的性能监控
import { onLCP, onFID, onCLS } from 'web-vitals';
 
class SimpleWebVitalsMonitor {
  constructor() {
    this.initMonitoring();
  }
 
  initMonitoring() {
    onLCP(this.sendMetric);
    onFID(this.sendMetric);
    onCLS(this.sendMetric);
  }
 
  sendMetric(metric) {
    // 发送到分析服务
    console.log(`${metric.name}: ${metric.value}`);
 
    // 集成Google Analytics
    if (window.gtag) {
      window.gtag('event', 'web_vitals', {
        event_category: 'Performance',
        event_label: metric.name,
        value: Math.round(metric.value)
      });
    }
  }
}

// 简化的性能预算检查
class PerformanceBudget {
  constructor() {
    this.budgets = {
      javascript: 200, // KB
      css: 100,
      images: 500,
      total: 1000
    };
  }
 
  checkBudgets() {
    const resources = performance.getEntriesByType('resource');
    const sizes = { javascript: 0, css: 0, images: 0, total: 0 };
 
    resources.forEach(resource => {
      const size = resource.transferSize || 0;
      sizes.total += size;
 
      if (resource.name.includes('.js')) sizes.javascript += size;
      else if (resource.name.includes('.css')) sizes.css += size;
      else if (/\.(jpg|jpeg|png|gif|webp)/.test(resource.name)) sizes.images += size;
    });
 
    // 检查预算违规
    const violations = [];
    Object.entries(sizes).forEach(([type, size]) => {
      const budgetKB = this.budgets[type];
      const actualKB = Math.round(size / 1024);
 
      if (actualKB > budgetKB) {
        violations.push({
          type,
          actual: actualKB,
          budget: budgetKB,
          excess: actualKB - budgetKB
        });
      }
    });
 
    return violations;
  }
}

// 简化的图片懒加载
class SimpleImageLazyLoader {
  constructor() {
    this.setupLazyLoading();
  }
 
  setupLazyLoading() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.classList.add('loaded');
          observer.unobserve(img);
        }
      });
    }, { rootMargin: '50px' });
 
    // 监听所有懒加载图片
    document.querySelectorAll('img[data-src]').forEach(img => {
      observer.observe(img);
    });
  }
 
  // 预加载关键图片
  preloadImages(urls) {
    urls.forEach(url => {
      const link = document.createElement('link');
      link.rel = 'preload';
      link.as = 'image';
      link.href = url;
      document.head.appendChild(link);
    });
  }
}

// 简化的代码分割实现
class SimpleCodeSplitting {
  // 路由级懒加载
  static createLazyRoute(importFn) {
    return React.lazy(() => import(importFn));
  }
 
  // 动态导入模块
  static async loadModule(modulePath) {
    try {
      const module = await import(modulePath);
      return module;
    } catch (error) {
      console.error(`模块加载失败: ${modulePath}`, error);
      throw error;
    }
  }
 
  // 预加载关键模块
  static preloadModule(modulePath) {
    const link = document.createElement('link');
    link.rel = 'modulepreload';
    link.href = modulePath;
    document.head.appendChild(link);
  }
}
 
// React组件懒加载示例
const LazyDashboard = React.lazy(() => import('./Dashboard'));
const LazyProfile = React.lazy(() => import('./Profile'));
 
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/dashboard" element={<LazyDashboard />} />
        <Route path="/profile" element={<LazyProfile />} />
      </Routes>
    </Suspense>
  );
}

// 简化的缓存实现
class SimpleCacheManager {
  // 注册Service Worker
  static async registerSW() {
    if ('serviceWorker' in navigator) {
      try {
        await navigator.serviceWorker.register('/sw.js');
        console.log('Service Worker注册成功');
      } catch (error) {
        console.error('Service Worker注册失败:', error);
      }
    }
  }
 
  // 预缓存关键资源
  static precacheResources(urls) {
    urls.forEach(url => {
      const link = document.createElement('link');
      link.rel = 'prefetch';
      link.href = url;
      document.head.appendChild(link);
    });
  }
}

// 简化的React性能优化示例
import React, { memo, useMemo, useCallback, useState } from 'react';
 
// 1. 使用memo避免不必要的重渲染
const UserCard = memo(({ user, onEdit }) => {
  const handleEdit = useCallback(() => {
    onEdit(user.id);
  }, [user.id, onEdit]);
 
  const displayName = useMemo(() => {
    return `${user.firstName} ${user.lastName}`.trim();
  }, [user.firstName, user.lastName]);
 
  return (
    <div className="user-card">
      <h3>{displayName}</h3>
      <button onClick={handleEdit}>Edit</button>
    </div>
  );
});
 
// 2. 防抖搜索优化
const SearchInput = ({ onSearch }) => {
  const [value, setValue] = useState('');
 
  const debouncedSearch = useCallback(
    debounce((searchTerm) => onSearch(searchTerm), 300),
    [onSearch]
  );
 
  useEffect(() => {
    debouncedSearch(value);
  }, [value, debouncedSearch]);
 
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="搜索用户..."
    />
  );
};
 
// 3. 内存泄漏防护
const DataFetcher = ({ userId }) => {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    let cancelled = false;
 
    const fetchData = async () => {
      try {
        const response = await fetch(`/api/users/${userId}`);
        const result = await response.json();
 
        if (!cancelled) {
          setData(result);
        }
      } catch (error) {
        console.error('Fetch error:', error);
      }
    };
 
    fetchData();
 
    return () => {
      cancelled = true; // 防止内存泄漏
    };
  }, [userId]);
 
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};
 
// 4. 虚拟滚动（使用react-window）
import { FixedSizeList as List } from 'react-window';
 
const VirtualList = ({ items }) => {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );
 
  return (
    <List
      height={400}
      itemCount={items.length}
      itemSize={50}
    >
      {Row}
    </List>
  );
};

// 简化的性能监控实现
import { onLCP, onFID, onCLS } from 'web-vitals';
 
class SimplePerformanceMonitor {
  constructor() {
    this.setupWebVitals();
  }
 
  setupWebVitals() {
    onLCP(this.sendMetric);
    onFID(this.sendMetric);
    onCLS(this.sendMetric);
  }
 
  sendMetric(metric) {
    // 发送到分析服务
    fetch('/api/analytics/performance', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: metric.name,
        value: metric.value,
        rating: metric.rating,
        timestamp: Date.now()
      })
    });
  }
}
 

// 简化的性能监控初始化
class PerformanceTracker {
  static init() {
    // 初始化Web Vitals监控
    new SimplePerformanceMonitor();
 
    // 初始化错误监控
    window.addEventListener('error', (event) => {
      console.error('JavaScript Error:', event.error);
    });
 
    // 初始化资源监控
    new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        if (entry.duration > 1000) {
          console.warn('Slow resource:', entry.name);
        }
      });
    }).observe({ entryTypes: ['resource'] });
  }
}
 
// 初始化性能监控
PerformanceTracker.init();