Next.js 性能优化最佳实践
2025年2月27日·Admin·Next.js
REVIEWTypeScript
规则评分
0.0
规则描述
全面的 Next.js 应用性能优化指南，包括图片优化、代码分割、缓存策略、服务器组件和客户端组件的合理使用，以及性能监控方法。
提示词
我需要优化我的 Next.js 应用性能，请根据以下信息提供优化建议：
1. Next.js 版本: {{version}}
2. 主要问题: {{performanceIssue}}
3. 当前页面加载时间: {{loadTime}}
4. 使用的状态管理: {{stateManagement}}
5. 部署平台: {{deployPlatform}}
请提供以下内容：
1. 针对性的性能优化建议
2. 代码实现示例
3. 性能监控方法
4. 常见陷阱和避免方法
请确保建议遵循 Next.js 最新的最佳实践，并考虑用户体验和开发效率。规则内容
# Next.js 性能优化最佳实践
## 规则类型
最佳实践 (BEST_PRACTICE)
## 适用技术
Next.js, React, TypeScript, JavaScript
## 问题描述
Next.js 应用在以下情况下可能面临性能挑战：
- 首次加载时间过长
- 页面交互响应缓慢
- 大型依赖包导致的包体积膨胀
- 不必要的客户端渲染
- 图片和静态资源未优化
- 缓存策略不当
- 服务器和客户端组件使用不当
- 路由预加载配置不合理
- 第三方脚本影响性能
## 规则内容
优化 Next.js 应用性能应遵循以下最佳实践：
### 1. 图片优化
Next.js 内置的 Image 组件提供了自动图片优化功能，包括：
- 自动调整图片大小
- 延迟加载（视口外的图片不会立即加载）
- WebP 和 AVIF 等现代格式支持
- 防止布局偏移
**示例代码：**
```tsx
// ❌ 未优化的图片
<img src="/large-image.jpg" alt="Description" />
// ✅ 使用 Next.js Image 组件
import Image from 'next/image'
<Image
src="/large-image.jpg"
alt="Description"
width={1200}
height={800}
placeholder="blur" // 可选的加载占位符
blurDataURL="data:image/jpeg;base64,..." // 可选的模糊数据URL
priority={false} // 对于首屏关键图片设为 true
quality={80} // 1-100，默认为 75
/>
```
**配置优化：**
在 `next.config.js` 中配置图片优化选项：
```js
module.exports = {
images: {
formats: ['image/avif', 'image/webp'],
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
domains: ['example.com'], // 允许的外部图片域名
minimumCacheTTL: 60, // 缓存时间（秒）
},
}
```
### 2. 代码分割与懒加载
Next.js 默认对页面进行代码分割，但对于大型组件和库，应使用动态导入和懒加载：
**组件懒加载：**
```tsx
// ❌ 直接导入大型组件
import LargeComponent from '@/components/LargeComponent'
// ✅ 使用动态导入
import dynamic from 'next/dynamic'
const LargeComponent = dynamic(() => import('@/components/LargeComponent'), {
loading: () => <p>Loading...</p>,
ssr: false, // 如果组件不需要SSR，设置为false可提高性能
})
export default function Page() {
return (
<div>
<LargeComponent />
</div>
)
}
```
**条件导入第三方库：**
```tsx
// 仅在需要时导入大型库
const handleClick = async () => {
const { format } = await import('date-fns')
const formattedDate = format(new Date(), 'yyyy-MM-dd')
console.log(formattedDate)
}
```
### 3. 服务器组件与客户端组件
Next.js 13+ 的 App Router 引入了服务器组件，合理使用可大幅提升性能：
**服务器组件最佳实践：**
```tsx
// app/products/page.tsx
// 这是一个服务器组件（默认）
import { ProductList } from '@/components/ProductList'
import { getProducts } from '@/lib/api'
export default async function ProductsPage() {
// 直接在服务器上获取数据，无需客户端 API 调用
const products = await getProducts()
return (
<div>
<h1>Products</h1>
<ProductList products={products} />
</div>
)
}
```
**客户端组件（需要交互时）：**
```tsx
// components/AddToCart.tsx
'use client' // 标记为客户端组件
import { useState } from 'react'
export function AddToCart({ productId }) {
const [isAdding, setIsAdding] = useState(false)
const handleAddToCart = async () => {
setIsAdding(true)
// 客户端逻辑
await addToCart(productId)
setIsAdding(false)
}
return (
<button
onClick={handleAddToCart}
disabled={isAdding}
>
{isAdding ? 'Adding...' : 'Add to Cart'}
</button>
)
}
```
**组件嵌套最佳实践：**
- 将客户端组件保持在组件树的叶子节点
- 将数据获取和业务逻辑放在服务器组件中
- 将交互UI放在客户端组件中
### 4. 缓存策略优化
Next.js 提供了多层缓存机制，合理配置可显著提升性能：
**数据获取缓存：**
```tsx
// 使用 fetch 的内置缓存
async function getProducts() {
// 默认: { cache: 'force-cache' }
const res = await fetch('https://api.example.com/products')
return res.json()
}
// 重新验证数据（ISR）
async function getProducts() {
const res = await fetch('https://api.example.com/products', {
next: { revalidate: 3600 } // 每小时重新验证一次
})
return res.json()
}
// 动态数据（无缓存）
async function getProducts() {
const res = await fetch('https://api.example.com/products', {
cache: 'no-store'
})
return res.json()
}
```
**路由缓存配置：**
在 `layout.js` 或 `page.js` 中设置路由段缓存：
```tsx
export const dynamic = 'force-dynamic' // 禁用缓存
// 或
export const revalidate = 3600 // 每小时重新验证
// 或
export const fetchCache = 'force-cache' // 强制缓存（默认）
```
### 5. 字体优化
使用 Next.js 内置的字体优化功能：
```tsx
// app/layout.tsx
import { Inter } from 'next/font/google'
// 字体优化：子集、预加载、自托管
const inter = Inter({
subsets: ['latin'],
display: 'swap',
preload: true,
// 可选：指定字重以减小字体文件大小
weight: ['400', '700'],
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
)
}
```
### 6. 脚本优化
优化第三方脚本加载：
```tsx
// ❌ 直接在 head 中加载脚本
<Head>
<script src="https://analytics.example.com/script.js" />
</Head>
// ✅ 使用 next/script 组件
import Script from 'next/script'
// 在 layout.js 或 page.js 中
<Script
src="https://analytics.example.com/script.js"
strategy="lazyOnload" // 'beforeInteractive', 'afterInteractive', 'lazyOnload', 'worker'
onLoad={() => console.log('Script loaded')}
/>
```
### 7. 路由预加载
利用 Next.js 的路由预加载功能：
```tsx
// 使用 Link 组件自动预加载
import Link from 'next/link'
<Link href="/dashboard">Dashboard</Link>
// 手动预加载
import { useRouter } from 'next/navigation'
const router = useRouter()
// 当用户悬停在按钮上时预加载
const handleMouseEnter = () => {
router.prefetch('/dashboard')
}
<button onMouseEnter={handleMouseEnter} onClick={() => router.push('/dashboard')}>
Dashboard
</button>
```
### 8. 状态管理优化
优化状态管理以减少不必要的渲染：
```tsx
// ❌ 将所有状态放在全局存储
const globalStore = {
user: { ... },
products: [ ... ],
cart: [ ... ],
ui: { ... }
}
// ✅ 分离关注点，使用原子化状态
// userStore.js
const useUserStore = create((set) => ({
user: null,
setUser: (user) => set({ user }),
}))
// cartStore.js
const useCartStore = create((set) => ({
items: [],
addItem: (item) => set((state) => ({
items: [...state.items, item]
})),
}))
```
### 9. 构建优化
优化 Next.js 构建配置：
```js
// next.config.js
module.exports = {
// 启用构建输出优化
output: 'standalone',
// 启用 gzip 压缩
compress: true,
// 配置构建 ID 以改进缓存
generateBuildId: async () => {
return 'my-build-id-' + Date.now()
},
// 配置 webpack
webpack: (config, { dev, isServer }) => {
// 仅在生产构建中应用优化
if (!dev) {
// 添加额外的优化
}
return config
},
// 启用 SWC 压缩（比 Terser 更快）
swcMinify: true,
}
```
### 10. 性能监控
实施性能监控以持续改进：
**Web Vitals 监控：**
```tsx
// app/layout.tsx
import { useReportWebVitals } from 'next/web-vitals'
export function WebVitalsReporter() {
useReportWebVitals(metric => {
// 发送到分析服务
console.log(metric)
// 示例：发送到 Google Analytics
const body = JSON.stringify({
name: metric.name,
value: metric.value,
id: metric.id,
})
navigator.sendBeacon('/api/analytics', body)
})
return null
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<WebVitalsReporter />
{children}
</body>
</html>
)
}
```
**自定义性能标记：**
```tsx
// 在客户端组件中
'use client'
import { useEffect } from 'react'
export default function PerformanceMonitor() {
useEffect(() => {
// 记录组件挂载时间
performance.mark('component-mounted')
// 执行一些操作
doSomething()
// 记录操作完成时间
performance.mark('operation-complete')
// 计算操作耗时
performance.measure(
'operation-duration',
'component-mounted',
'operation-complete'
)
// 获取测量结果
const measures = performance.getEntriesByName('operation-duration')
console.log('Operation took:', measures[0].duration, 'ms')
// 清理
return () => {
performance.clearMarks()
performance.clearMeasures()
}
}, [])
return null
}
```
## 常见陷阱和避免方法
### 1. 过度客户端渲染
**问题**: 将所有组件标记为客户端组件，失去服务器组件的性能优势。
**解决方案**:
- 默认使用服务器组件
- 仅在需要交互、hooks 或浏览器 API 时使用客户端组件
- 将客户端组件保持在组件树的叶子节点
### 2. 未优化的图片
**问题**: 使用标准 `<img>` 标签导致 CLS（累积布局偏移）和资源浪费。
**解决方案**:
- 始终使用 Next.js 的 `<Image>` 组件
- 为所有图片指定 width 和 height
- 为首屏关键图片设置 priority={true}
### 3. 过度依赖全局状态
**问题**: 将所有状态放在全局存储中，导致不必要的重新渲染。
**解决方案**:
- 使用局部状态管理简单的 UI 状态
- 将全局状态分解为独立的原子化存储
- 使用选择器仅订阅所需的状态片段
### 4. 忽略缓存策略
**问题**: 对所有数据使用相同的缓存策略，或完全不使用缓存。
**解决方案**:
- 为静态数据使用 `{ cache: 'force-cache' }`
- 为定期更新的数据使用 `{ next: { revalidate: seconds } }`
- 为动态数据使用 `{ cache: 'no-store' }`
- 使用 React Query 或 SWR 进行客户端缓存
### 5. 大型依赖包
**问题**: 导入整个库而只使用其中一小部分功能。
**解决方案**:
- 使用支持 tree-shaking 的库
- 使用动态导入按需加载库
- 考虑使用更轻量的替代库
- 使用 bundle analyzer 识别大型依赖
```bash
# 安装 bundle analyzer
npm install --save-dev @next/bundle-analyzer
# 在 next.config.js 中配置
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({
// 其他配置
})
# 运行分析
ANALYZE=true npm run build
```
## 例外情况
在以下情况下可以适当调整这些规则：
- 小型演示或原型项目可以简化优化策略
- 内部工具或管理面板可能优先考虑开发速度而非极致性能
- 特定的用户体验需求可能需要不同的优化权衡
- 某些第三方集成可能限制了可用的优化选项
## 相关规则
- Next.js 项目初始化最佳实践
- React 组件设计模式
- Next.js 服务器组件与客户端组件使用指南
- Next.js 部署优化策略
## 参考资料
- [Next.js 官方文档 - 性能优化](https://nextjs.org/docs/advanced-features/performance)
- [Web Vitals](https://web.dev/vitals/)
- [React 性能优化](https://react.dev/learn/render-and-commit)
- [图片优化指南](https://images.guide/)
- [Next.js GitHub 仓库](https://github.com/vercel/next.js)
- [Vercel 性能分析工具](https://vercel.com/analytics)