Web 性能优化实战：从 70 分到 95 分的优化之旅

// 使用 React.lazy 进行路由级别的代码分割
const Dashboard = lazy(() => import('./pages/Dashboard'))
const Analytics = lazy(() => import('./pages/Analytics'))
const Settings = lazy(() => import('./pages/Settings'))

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

// 只在需要时加载 Chart.js
async function loadChartLibrary() {
  const { Chart } = await import('chart.js/auto')
  return Chart
}

function ChartComponent({ data }) {
  useEffect(() => {
    loadChartLibrary().then(Chart => {
      // 使用 Chart.js
    })
  }, [])
}

// 使用 next/image 自动优化图片
import Image from 'next/image'

function OptimizedImage({ src, alt }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={800}
      height={600}
      loading="lazy"
      placeholder="blur"
      blurDataURL={generateBlurDataURL(src)}
    />
  )
}

// 根据设备提供不同尺寸的图片
function ResponsiveImage({ src, alt }) {
  return (
    <picture>
      <source
        media="(max-width: 640px)"
        srcSet={`${src}?w=640&q=75`}
      />
      <source
        media="(max-width: 1024px)"
        srcSet={`${src}?w=1024&q=75`}
      />
      <img
        src={`${src}?w=1920&q=75`}
        alt={alt}
        loading="lazy"
      />
    </picture>
  )
}

<!-- 预连接到关键域名 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://api.example.com">

<!-- 预加载关键资源 -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">

<!-- 延迟加载非关键脚本 -->
<script src="/js/analytics.js" defer></script>
<script src="/js/chat-widget.js" async></script>

// 使用 memo 避免不必要的重渲染
const ExpensiveComponent = memo(({ data }) => {
  return <ComplexVisualization data={data} />
}, (prevProps, nextProps) => {
  // 自定义比较逻辑
  return prevProps.data.id === nextProps.data.id
})

// 使用 useMemo 缓存计算结果
function DataProcessor({ rawData }) {
  const processedData = useMemo(() => {
    return expensiveProcessing(rawData)
  }, [rawData])
  
  return <DataDisplay data={processedData} />
}

// 使用 useCallback 避免函数重创建
function SearchBar({ onSearch }) {
  const [query, setQuery] = useState('')
  
  const debouncedSearch = useCallback(
    debounce((value) => onSearch(value), 300),
    [onSearch]
  )
  
  return (
    <input
      value={query}
      onChange={(e) => {
        setQuery(e.target.value)
        debouncedSearch(e.target.value)
      }}
    />
  )
}

// Service Worker 缓存策略
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // 缓存优先，网络回退
      return response || fetch(event.request).then((response) => {
        // 缓存新资源
        if (response.status === 200) {
          const responseClone = response.clone()
          caches.open('v1').then((cache) => {
            cache.put(event.request, responseClone)
          })
        }
        return response
      })
    })
  )
})

// HTTP 缓存头配置
app.use((req, res, next) => {
  // 静态资源长期缓存
  if (req.url.match(/\.(js|css|jpg|png|gif|ico|woff2)$/)) {
    res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
  }
  // API 响应短期缓存
  else if (req.url.startsWith('/api/')) {
    res.setHeader('Cache-Control', 'private, max-age=300')
  }
  next()
})

// 错误示例：忘记清理事件监听器
function LeakyComponent() {
  useEffect(() => {
    const handler = () => console.log('scroll')
    window.addEventListener('scroll', handler)
    // 忘记清理！
  }, [])
}

// 正确示例：清理副作用
function FixedComponent() {
  useEffect(() => {
    const handler = () => console.log('scroll')
    window.addEventListener('scroll', handler)
    
    return () => {
      window.removeEventListener('scroll', handler)
    }
  }, [])
}

// 使用 WeakMap 避免内存泄漏
const cache = new WeakMap()

function getCachedData(obj) {
  if (cache.has(obj)) {
    return cache.get(obj)
  }
  
  const data = processObject(obj)
  cache.set(obj, data)
  return data
}

// 使用 Performance Observer API 监控性能
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // 上报性能数据
    analytics.track('performance', {
      name: entry.name,
      duration: entry.duration,
      startTime: entry.startTime
    })
  }
})

observer.observe({ entryTypes: ['navigation', 'resource', 'paint'] })

// 监控长任务
const taskObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn('Long task detected:', entry)
    }
  }
})

taskObserver.observe({ entryTypes: ['longtask'] })