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

在今世 Web 应用中，性能优化直接影响用户体验和业务转化。Next.js 14 提供了多种内置的性能优化特性，本日我们就来深入探究怎样充实利用这些特性，以及一些实用的优化本领。
图片和字体优化

1. 图片优化

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

1. // components/OptimizedImage.tsx
2. import Image from 'next/image';
3. import { useState } from 'react';
5. interface OptimizedImageProps {
6.   src: string;
7.   alt: string;
8.   width: number;
9.   height: number;
10. }
12. export function OptimizedImage({
13.   src,
14.   alt,
15.   width,
16.   height
17. }: OptimizedImageProps) {
18.   const [isLoading, setLoading] = useState(true);
20.   return (
21.     <div className="relative overflow-hidden">
22.       <Image
23.         src={src}
24.         alt={alt}
25.         width={width}
26.         height={height}
27.         quality={75} // 默认图片质量
28.         placeholder="blur" // 使用模糊占位
29.         blurDataURL="data:image/jpeg;base64,..." // 生成的 base64 图片
30.         className={`
31.           duration-700 ease-in-out
32.           ${isLoading ? 'scale-110 blur-2xl' : 'scale-100 blur-0'}
33.         `}
34.         onLoadingComplete={() => setLoading(false)}
35.         priority={false} // 是否优先加载
36.       />
37.     </div>
38.   );
39. }
41. // 使用自定义图片加载器
42. const imageLoader = ({ src, width, quality }) => {
43.   return `https://your-cdn.com/${src}?w=${width}&q=${quality || 75}`;
44. };
46. // next.config.js
47. /** @type {import('next').NextConfig} */
48. const nextConfig = {
49.   images: {
50.     loader: 'custom',
51.     loaderFile: './lib/imageLoader.ts',
52.     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
53.     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
54.     formats: ['image/webp'],
55.   },
56. };

复制代码

2. 字体优化

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

1. // app/fonts.ts
2. import { Inter, Roboto_Mono } from 'next/font/google';
4. export const inter = Inter({
5.   subsets: ['latin'],
6.   display: 'swap',
7.   preload: true,
8.   fallback: ['system-ui', 'arial'],
9.   adjustFontFallback: true, // 自动调整回退字体
10. });
12. export const roboto_mono = Roboto_Mono({
13.   subsets: ['latin'],
14.   display: 'swap',
15. });
17. // app/layout.tsx
18. import { inter } from './fonts';
20. export default function RootLayout({
21.   children,
22. }: {
23.   children: React.ReactNode;
24. }) {
25.   return (
26.     <html lang="en" className={inter.className}>
27.       <body>{children}</body>
28.     </html>
29.   );
30. }
32. // 自定义字体加载
33. import localFont from 'next/font/local';
35. const myFont = localFont({
36.   src: [
37.     {
38.       path: '../public/fonts/font-regular.woff2',
39.       weight: '400',
40.       style: 'normal',
41.     },
42.     {
43.       path: '../public/fonts/font-bold.woff2',
44.       weight: '700',
45.       style: 'normal',
46.     },
47.   ],
48.   display: 'swap',
49.   preload: true,
50. });

复制代码

动态导入和代码分割

1. 组件动态导入

1. // components/DynamicComponent.tsx
2. import dynamic from 'next/dynamic';
3. import { Suspense } from 'react';
5. // 基础动态导入
6. const DynamicHeader = dynamic(() => import('./Header'), {
7.   loading: () => <p>Loading...</p>,
8.   ssr: true, // 是否服务端渲染
9. });
11. // 带有自定义加载的动态导入
12. const DynamicChart = dynamic(
13.   () => import('./Chart').then(mod => mod.Chart),
14.   {
15.     loading: () => <ChartSkeleton />,
16.     ssr: false, // 禁用服务端渲染
17.   }
18. );
20. // 使用 Suspense 包裹动态组件
21. export function DashboardPage() {
22.   return (
23.     <div>
24.       <DynamicHeader />
25.       <Suspense fallback={<ChartSkeleton />}>
26.         <DynamicChart />
27.       </Suspense>
28.     </div>
29.   );
30. }

复制代码

2. 路由分组和懒加载

1. // app/(marketing)/layout.tsx
2. import { Suspense } from 'react';
4. // 营销相关页面的布局
5. export default function MarketingLayout({
6.   children
7. }: {
8.   children: React.ReactNode;
9. }) {
10.   return (
11.     <div className="marketing-layout">
12.       <Suspense fallback={<NavSkeleton />}>
13.         <Navigation />
14.       </Suspense>
15.       {children}
16.     </div>
17.   );
18. }
20. // app/(dashboard)/layout.tsx
21. // 仪表板相关页面的布局
22. export default function DashboardLayout({
23.   children
24. }: {
25.   children: React.ReactNode;
26. }) {
27.   return (
28.     <div className="dashboard-layout">
29.       <Suspense fallback={<SidebarSkeleton />}>
30.         <Sidebar />
31.       </Suspense>
32.       <main>{children}</main>
33.     </div>
34.   );
35. }

复制代码

缓存战略优化

1. 数据缓存

1. // lib/cache.ts
2. import { cache } from 'react';
3. import { Redis } from '@upstash/redis';
5. const redis = new Redis({
6.   url: process.env.REDIS_URL,
7.   token: process.env.REDIS_TOKEN,
8. });
10. // 使用 React 缓存
11. export const getCachedData = cache(async (key: string) => {
12.   // 首先尝试从 Redis 获取
13.   const cached = await redis.get(key);
14.   if (cached) return JSON.parse(cached);
16.   // 如果没有缓存，则获取新数据
17.   const data = await fetchData(key);
19.   // 存入 Redis
20.   await redis.set(key, JSON.stringify(data), {
21.     ex: 3600 // 1小时过期
22.   });
24.   return data;
25. });
27. // 使用示例
28. async function ProductPage({ id }: { id: string }) {
29.   const product = await getCachedData(`product:${id}`);
30.   return <ProductDetails product={product} />;
31. }

复制代码

2. 静态天生优化

1. // app/products/[id]/page.tsx
2. import { generateMetadata } from 'next';
4. // 生成静态路由
5. export async function generateStaticParams() {
6.   const products = await getTopProducts();
8.   return products.map((product) => ({
9.     id: product.id,
10.   }));
11. }
13. // 静态元数据
14. export async function generateMetadata({ params }: {
15.   params: { id: string }
16. }): Promise<Metadata> {
17.   const product = await getProduct(params.id);
19.   return {
20.     title: product.name,
21.     description: product.description,
22.     openGraph: {
23.       images: [product.image],
24.     },
25.   };
26. }
28. // 页面组件
29. export default async function ProductPage({
30.   params
31. }: {
32.   params: { id: string }
33. }) {
34.   const product = await getProduct(params.id);
36.   return (
37.     <div>
38.       <h1>{product.name}</h1>
39.       <ProductDetails product={product} />
40.     </div>
41.   );
42. }

复制代码

首屏加载优化

1. 流式渲染

1. // app/page.tsx
2. import { Suspense } from 'react';
3. import { headers } from 'next/headers';
5. async function SlowComponent() {
6.   const headersList = headers();
7.   const userAgent = headersList.get('user-agent');
9.   // 模拟慢速数据加载
10.   await new Promise(resolve => setTimeout(resolve, 2000));
12.   return (
13.     <div>
14.       <p>User Agent: {userAgent}</p>
15.     </div>
16.   );
17. }
19. export default function HomePage() {
20.   return (
21.     <div>
22.       <h1>即时加载的内容</h1>
24.       <Suspense fallback={<LoadingSkeleton />}>
25.         <SlowComponent />
26.       </Suspense>
28.       <Suspense fallback={<CardsSkeleton />}>
29.         <PopularProducts />
30.       </Suspense>
32.       <Suspense fallback={<FeedSkeleton />}>
33.         <RecentActivity />
34.       </Suspense>
35.     </div>
36.   );
37. }

复制代码

2. 预加载数据

1. // lib/prefetch.ts
2. export async function prefetchData() {
3.   // 预加载关键数据
4.   const promises = [
5.     prefetchNavigation(),
6.     prefetchUserData(),
7.     prefetchPopularProducts(),
8.   ];
10.   await Promise.all(promises);
11. }
13. // app/layout.tsx
14. export default async function RootLayout({
15.   children
16. }: {
17.   children: React.ReactNode
18. }) {
19.   // 在布局组件中预加载数据
20.   await prefetchData();
22.   return (
23.     <html>
24.       <body>{children}</body>
25.     </html>
26.   );
27. }

复制代码

Core Web Vitals 优化

1. 性能监控

1. // lib/analytics.ts
2. export function reportWebVitals({
3.   id,
4.   name,
5.   label,
6.   value,
7. }: {
8.   id: string;
9.   name: string;
10.   label: string;
11.   value: number;
12. }) {
13.   // 发送性能指标到分析服务
14.   fetch('/api/analytics', {
15.     method: 'POST',
16.     body: JSON.stringify({
17.       id,
18.       name,
19.       label,
20.       value,
21.       // 添加其他上下文信息
22.       page: window.location.pathname,
23.       timestamp: Date.now(),
24.     }),
25.   });
26. }
28. // next.config.js
29. /** @type {import('next').NextConfig} */
30. const nextConfig = {
31.   experimental: {
32.     instrumentationHook: true,
33.   },
34. };
36. // instrumentation.ts
37. export function register() {
38.   if (process.env.NEXT_RUNTIME === 'nodejs') {
39.     // 服务端监控
40.     require('./monitoring/server').setup();
41.   }
42. }

复制代码

2. 性能优化实践

1. // components/OptimizedList.tsx
2. import { useVirtualizer } from '@tanstack/react-virtual';
3. import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';
5. // 虚拟列表优化
6. export function OptimizedList({ items }: { items: any[] }) {
7.   const parentRef = useRef<HTMLDivElement>(null);
9.   const virtualizer = useVirtualizer({
10.     count: items.length,
11.     getScrollElement: () => parentRef.current,
12.     estimateSize: () => 50,
13.   });
15.   return (
16.     <div ref={parentRef} className="h-[500px] overflow-auto">
17.       <div
18.         style={{
19.           height: `${virtualizer.getTotalSize()}px`,
20.           position: 'relative',
21.         }}
22.       >
23.         {virtualizer.getVirtualItems().map((virtualItem) => (
24.           <div
25.             key={virtualItem.key}
26.             style={{
27.               position: 'absolute',
28.               top: 0,
29.               left: 0,
30.               width: '100%',
31.               height: `${virtualItem.size}px`,
32.               transform: `translateY(${virtualItem.start}px)`,
33.             }}
34.           >
35.             <ListItem item={items[virtualItem.index]} />
36.           </div>
37.         ))}
38.       </div>
39.     </div>
40.   );
41. }
43. // 图片懒加载优化
44. export function LazyImage({ src, alt }: { src: string; alt: string }) {
45.   const imgRef = useRef<HTMLImageElement>(null);
46.   const { isIntersecting } = useIntersectionObserver(imgRef);
48.   return (
49.     <img
50.       ref={imgRef}
51.       src={isIntersecting ? src : ''}
52.       alt={alt}
53.       loading="lazy"
54.       decoding="async"
55.     />
56.   );
57. }

复制代码

3. 构建优化

1. // next.config.js
2. const withBundleAnalyzer = require('@next/bundle-analyzer')({
3.   enabled: process.env.ANALYZE === 'true',
4. });
6. /** @type {import('next').NextConfig} */
7. const nextConfig = {
8.   // 优化构建配置
9.   poweredByHeader: false,
10.   compress: true,
11.   productionBrowserSourceMaps: false,
13.   // 优化图片配置
14.   images: {
15.     minimumCacheTTL: 60,
16.     deviceSizes: [640, 750, 828, 1080, 1200, 1920],
17.     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
18.   },
20.   // 实验性功能
21.   experimental: {
22.     optimizeCss: true, // 启用 CSS 优化
23.     scrollRestoration: true, // 启用滚动位置恢复
24.     serverActions: true, // 启用服务端操作
25.   },
27.   // webpack 配置
28.   webpack: (config, { dev, isServer }) => {
29.     // 优化生产环境构建
30.     if (!dev && !isServer) {
31.       config.optimization.splitChunks = {
32.         chunks: 'all',
33.         minSize: 20000,
34.         maxSize: 244000,
35.         minChunks: 1,
36.         maxAsyncRequests: 30,
37.         maxInitialRequests: 30,
38.         cacheGroups: {
39.           defaultVendors: {
40.             test: /[\\/]node_modules[\\/]/,
41.             priority: -10,
42.             reuseExistingChunk: true,
43.           },
44.           default: {
45.             minChunks: 2,
46.             priority: -20,
47.             reuseExistingChunk: true,
48.           },
49.         },
50.       };
51.     }
53.     return config;
54.   },
55. };
57. module.exports = withBundleAnalyzer(nextConfig);

复制代码

写在末了

Next.js 14 提供了丰富的性能优化工具和特性。在现实应用中，须要注意以下几点：

• 公道利用图片和字体优化
  
• 实行有用的代码分割战略
  
• 优化数据缓存和预加载
  
• 监控和优化 Core Web Vitals
  
• 连续举行构建优化
  

在下一篇文章中，我们将深入探究 Next.js 14 的摆设与运维战略。假如你有任何题目或发起，欢迎在批评区讨论！
假如以为这篇文章对你有资助，别忘了点个赞 👍