Web 性能优化完全指南

性能是用户体验的核心，让我们看看如何优化你的 Web 应用。

加载性能优化

图片优化

tsx
import Image from 'next/image'

// 使用 Next.js Image 组件自动优化
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // 预加载重要图片
/>

代码分割

tsx
import dynamic from 'next/dynamic'

// 动态导入组件
const HeavyComponent = dynamic(
  () => import('./HeavyComponent'),
  { loading: () => <p>Loading...</p> }
)

运行时性能

React.memo

tsx
const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{/* 复杂渲染逻辑 */}</div>
})

useMemo 和 useCallback

tsx
const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b),
  [a, b]
)

const memoizedCallback = useCallback(
  () => doSomething(a, b),
  [a, b]
)

核心 Web 指标

• LCP (Largest Contentful Paint) - < 2.5s
• FID (First Input Delay) - < 100ms
• CLS (Cumulative Layout Shift) - < 0.1

总结

性能优化是一个持续的过程，需要不断监测和改进。