返回博客
前端Next.js性能

Next.js 15 性能优化:从 90 到 100 的最后一步

2026年3月15日7 分钟阅读

Lighthouse 分数从 90 提升到 100,这最后 10 分究竟怎么拿?

图片优化

使用 `next/image` 并合理设置 `priority` 和 `sizes`:

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority  // 首屏图片
  sizes="(max-width: 768px) 100vw, 1200px"
/>

字体优化

import { Noto_Sans_SC } from 'next/font/google'
const noto = Noto_Sans_SC({ subsets: ['latin'], display: 'swap' })

减少 JS Bundle

  • 使用 `dynamic()` 懒加载大组件
  • 避免在 Server Components 中导入客户端库