Next.js 静态导出的性能优化实战

如何用 Next.js 的 output: 'export' 模式构建高性能静态网站，包括字体优化、图片懒加载、CSS 策略和 Core Web Vitals 调优。

为什么选择静态导出

对于内容为主的网站（企业官网、博客、文档站），静态导出提供了最佳性价比：

• 零服务器成本：部署到 CDN（Vercel/Cloudflare Pages），全球加速
• 最大化 SEO：所有页面在构建时生成完整 HTML
• 安全性高：无服务端运行时 = 无服务端漏洞

字体优化

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap', variable: '--font-inter' });

next/font 自动进行字体子集化并内联 CSS，消除了 FOIT（不可见文本闪烁）。关键配置：

• display: 'swap' 确保文字先用系统字体渲染
• variable 模式允许在 CSS 中通过变量引用

CSS 策略

推荐 CSS Modules 而非 Tailwind：

• 零运行时：CSS Modules 编译为原生 CSS，无额外 JS
• 作用域隔离：无全局命名冲突
• 按需加载：只打包页面实际用到的样式

图片处理

静态导出不支持 next/image 的服务端优化。替代方案：

1. 构建时预处理：用 sharp 生成多尺寸图片
2. 使用 loading="lazy" 和 decoding="async"
3. 对关键首屏图片使用 fetchpriority="high"

Core Web Vitals 调优清单

| 指标 | 目标 | 关键手段 | |------|------|----------| | LCP | < 2.5s | 字体预加载、首屏图片优化、减少阻塞资源 | | FID | < 100ms | 减少主线程阻塞，延迟非关键 JS | | CLS | < 0.1 | 为图片/广告预留尺寸，字体 display:swap |

静态导出 + CDN 部署是内容网站的黄金组合，用对了工具链就能轻松拿到全绿 Lighthouse 分数。