第六章：Next.js 进阶

优化图像和字体

1. 图像优化

1.1 Next.js 图像组件 (next/image)

Next.js 提供了内置的 next/image 组件，用于自动优化图像：

  • 自动格式转换：根据浏览器支持转换为 WebP 或 AVIF 等现代格式
  • 懒加载：仅当图像进入视口时加载
  • 尺寸优化：自动调整图像尺寸以适应不同设备
  • 占位符：支持模糊占位或颜色占位
import Image from 'next/image'

function MyComponent() {
  return (
    <Image
      src="/profile.jpg"
      alt="Profile"
      width={500}
      height={500}
      placeholder="blur"
      blurDataURL="data:image/png;base64,..."
    />
  )
}

1.2 图像优化策略

  • 静态导入：对于已知图像，使用 import 静态导入
  • 远程图像：配置 next.config.js 中的 images.domains
  • 优先级标记：对关键图像使用 priority 属性

2. 字体优化

2.1 使用 next/font

Next.js 13+ 提供了 next/font 模块，可以自动优化字体：

  • 自动自托管：无需使用 Google Fonts 等外部服务
  • CSS 大小优化：仅包含使用的字符集
  • 零布局偏移：字体与页面同时加载
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

2.2 字体优化策略

  1. 预加载关键字体：在 _document.js 中预加载
  2. 字体显示策略：设置 display: swap 减少布局偏移
  3. 可变字体：优先使用可变字体减少文件大小

3. 性能监控

使用以下工具验证优化效果：

  • Lighthouse：检查图像和字体相关指标
  • WebPageTest：分析实际加载性能
  • Next.js Analytics：监控真实用户数据

4. 最佳实践

  1. 图像：

    • 优先使用 SVG 表示图标和简单图形
    • 为重要图像添加 priority 属性
    • 使用 sizes 属性响应式调整

  2. 字体：

    • 限制字体数量和变体
    • 考虑系统字体作为后备
    • 使用 font-display: optional 对非关键字体

5. 常见问题解决

  • 图像闪烁问题：确保正确设置 placeholder 和 blurDataURL
  • 字体加载延迟：预加载关键字体或使用 next/font
  • 布局偏移：为图像设置固定宽高比，使用 CSS aspect-ratio

通过这些优化技术，可以显著提升 Next.js 应用的加载性能和用户体验。

Last Updated::