Next.js 14 性能优化：从首屏加载到运行时优化的最佳实践

在现代 Web 应用中，性能优化直接影响用户体验和业务转化。Next.js 14 提供了多种内置的性能优化特性，今天我们就来深入探讨如何充分利用这些特性，以及一些实用的优化技巧。

图片和字体优化

1. 图片优化

Next.js 的 Image 组件供了强大的图片优化功能：

// components/OptimizedImage.tsx
import Image from 'next/image';
import { useState } from 'react';interface OptimizedImageProps {src: string;alt: string;width: number;height: number;
}export function OptimizedImage({src,alt,width,height
}: OptimizedImageProps) {const [isLoading, setLoading] = useState(true);return (<div className="relative overflow-hidden"><Imagesrc={src}alt={alt}width={width}height={height}quality={75} // 默认图片质量placeholder="blur" // 使用模糊占位blurDataURL="data:image/jpeg;base64,..." // 生成的 base64 图片className={`duration-700 ease-in-out${isLoading ? 'scale-110 blur-2xl' : 'scale-100 blur-0'}`}onLoadingComplete={() => setLoading(false)}priority={false} // 是否优先加载/></div>);
}// 使用自定义图片加载器
const imageLoader = ({ src, width, quality }) => {return `https://your-cdn.com/${src}?w=${width}&q=${quality || 75}`;
};// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {images: {loader: 'custom',loaderFile: './lib/imageLoader.ts',deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],formats: ['image/webp'],},
};

2. 字体优化

Next.js 14 提供了内置的字体优化：

// app/fonts.ts
import { Inter, Roboto_Mono } from 'next/font/google';export const inter = Inter({subsets: ['latin'],display: 'swap',preload: true,fallback: ['system-ui', 'arial'],adjustFontFallback: true, // 自动调整回退字体
});export const roboto_mono = Roboto_Mono({subsets: ['latin'],display: 'swap',
});// app/layout.tsx
import { inter } from './fonts';export default function RootLayout({children,
}: {children: React.ReactNode;
}) {return (<html lang="en" className={inter.className}><body>{children}</body></html>);
}// 自定义字体加载
import localFont from 'next/font/local';const myFont = localFont({src: [{path: '../public/fonts/font-regular.woff2',weight: '400',style: 'normal',},{path: '../public/fonts/font-bold.woff2',weight: '700',style: 'normal',},],display: 'swap',preload: true,
});

动态导入和代码分割

1. 组件动态导入

// components/DynamicComponent.tsx
import dynamic from 'next/dynamic';
import { Suspense } from 'react';// 基础动态导入
const DynamicHeader = dynamic(() => import('./Header'), {loading: () => <p>Loading...</p>,ssr: true, // 是否服务端渲染
});// 带有自定义加载的动态导入
const DynamicChart = dynamic(() => import('./Chart').then(mod => mod.Chart),{loading: () => <ChartSkeleton />,ssr: false, // 禁用服务端渲染}
);// 使用 Suspense 包裹动态组件
export function DashboardPage() {return (<div><DynamicHeader /><Suspense fallback={<ChartSkeleton />}><DynamicChart /></Suspense></div>);
}

2. 路由分组和懒加载

// app/(marketing)/layout.tsx
import { Suspense } from 'react';// 营销相关页面的布局
export default function MarketingLayout({children
}: {children: React.ReactNode;
}) {return (<div className="marketing-layout"><Suspense fallback={<NavSkeleton />}><Navigation /></Suspense>{children}</div>);
}// app/(dashboard)/layout.tsx
// 仪表板相关页面的布局
export default function DashboardLayout({children
}: {children: React.ReactNode;
}) {return (<div className="dashboard-layout"><Suspense fallback={<SidebarSkeleton />}><Sidebar /></Suspense><main>{children}</main></div>);
}

缓存策略优化

1. 数据缓存

// lib/cache.ts
import { cache } from 'react';
import { Redis } from '@upstash/redis';const redis = new Redis({url: process.env.REDIS_URL,token: process.env.REDIS_TOKEN,
});// 使用 React 缓存
export const getCachedData = cache(async (key: string) => {// 首先尝试从 Redis 获取const cached = await redis.get(key);if (cached) return JSON.parse(cached);// 如果没有缓存，则获取新数据const data = await fetchData(key);// 存入 Redisawait redis.set(key, JSON.stringify(data), {ex: 3600 // 1小时过期});return data;
});// 使用示例
async function ProductPage({ id }: { id: string }) {const product = await getCachedData(`product:${id}`);return <ProductDetails product={product} />;
}

2. 静态生成优化

// app/products/[id]/page.tsx
import { generateMetadata } from 'next';// 生成静态路由
export async function generateStaticParams() {const products = await getTopProducts();return products.map((product) => ({id: product.id,}));
}// 静态元数据
export async function generateMetadata({ params }: {params: { id: string }
}): Promise<Metadata> {const product = await getProduct(params.id);return {title: product.name,description: product.description,openGraph: {images: [product.image],},};
}// 页面组件
export default async function ProductPage({params
}: {params: { id: string }
}) {const product = await getProduct(params.id);return (<div><h1>{product.name}</h1><ProductDetails product={product} /></div>);
}

首屏加载优化

1. 流式渲染

// app/page.tsx
import { Suspense } from 'react';
import { headers } from 'next/headers';async function SlowComponent() {const headersList = headers();const userAgent = headersList.get('user-agent');// 模拟慢速数据加载await new Promise(resolve => setTimeout(resolve, 2000));return (<div><p>User Agent: {userAgent}</p></div>);
}export default function HomePage() {return (<div><h1>即时加载的内容</h1><Suspense fallback={<LoadingSkeleton />}><SlowComponent /></Suspense><Suspense fallback={<CardsSkeleton />}><PopularProducts /></Suspense><Suspense fallback={<FeedSkeleton />}><RecentActivity /></Suspense></div>);
}

2. 预加载数据

// lib/prefetch.ts
export async function prefetchData() {// 预加载关键数据const promises = [prefetchNavigation(),prefetchUserData(),prefetchPopularProducts(),];await Promise.all(promises);
}// app/layout.tsx
export default async function RootLayout({children
}: {children: React.ReactNode
}) {// 在布局组件中预加载数据await prefetchData();return (<html><body>{children}</body></html>);
}

Core Web Vitals 优化

1. 性能监控

// lib/analytics.ts
export function reportWebVitals({id,name,label,value,
}: {id: string;name: string;label: string;value: number;
}) {// 发送性能指标到分析服务fetch('/api/analytics', {method: 'POST',body: JSON.stringify({id,name,label,value,// 添加其他上下文信息page: window.location.pathname,timestamp: Date.now(),}),});
}// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {experimental: {instrumentationHook: true,},
};// instrumentation.ts
export function register() {if (process.env.NEXT_RUNTIME === 'nodejs') {// 服务端监控require('./monitoring/server').setup();}
}

2. 性能优化实践

// components/OptimizedList.tsx
import { useVirtualizer } from '@tanstack/react-virtual';
import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';// 虚拟列表优化
export function OptimizedList({ items }: { items: any[] }) {const parentRef = useRef<HTMLDivElement>(null);const virtualizer = useVirtualizer({count: items.length,getScrollElement: () => parentRef.current,estimateSize: () => 50,});return (<div ref={parentRef} className="h-[500px] overflow-auto"><divstyle={{height: `${virtualizer.getTotalSize()}px`,position: 'relative',}}>{virtualizer.getVirtualItems().map((virtualItem) => (<divkey={virtualItem.key}style={{position: 'absolute',top: 0,left: 0,width: '100%',height: `${virtualItem.size}px`,transform: `translateY(${virtualItem.start}px)`,}}><ListItem item={items[virtualItem.index]} /></div>))}</div></div>);
}// 图片懒加载优化
export function LazyImage({ src, alt }: { src: string; alt: string }) {const imgRef = useRef<HTMLImageElement>(null);const { isIntersecting } = useIntersectionObserver(imgRef);return (<imgref={imgRef}src={isIntersecting ? src : ''}alt={alt}loading="lazy"decoding="async"/>);
}

3. 构建优化

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({enabled: process.env.ANALYZE === 'true',
});/** @type {import('next').NextConfig} */
const nextConfig = {// 优化构建配置poweredByHeader: false,compress: true,productionBrowserSourceMaps: false,// 优化图片配置images: {minimumCacheTTL: 60,deviceSizes: [640, 750, 828, 1080, 1200, 1920],imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],},// 实验性功能experimental: {optimizeCss: true, // 启用 CSS 优化scrollRestoration: true, // 启用滚动位置恢复serverActions: true, // 启用服务端操作},// webpack 配置webpack: (config, { dev, isServer }) => {// 优化生产环境构建if (!dev && !isServer) {config.optimization.splitChunks = {chunks: 'all',minSize: 20000,maxSize: 244000,minChunks: 1,maxAsyncRequests: 30,maxInitialRequests: 30,cacheGroups: {defaultVendors: {test: /[\\/]node_modules[\\/]/,priority: -10,reuseExistingChunk: true,},default: {minChunks: 2,priority: -20,reuseExistingChunk: true,},},};}return config;},
};module.exports = withBundleAnalyzer(nextConfig);