编辑“︁Next.js性能优化”︁（章节）

= Next.js性能优化 =

== 介绍 ==  
Next.js 提供了多种渲染策略（如静态生成（SSG）、服务器端渲染（SSR）和客户端渲染（CSR）），但选择合适的策略只是性能优化的第一步。本节将深入探讨如何通过代码拆分、缓存、图像优化等技术进一步提升 Next.js 应用的性能，确保快速加载和流畅的用户体验。

== 核心优化技术 ==

=== 1. 代码拆分（Code Splitting） ===  
Next.js 默认支持动态导入（Dynamic Imports），允许按需加载模块，减少初始包体积。

<syntaxhighlight lang="javascript">
// 动态导入组件（仅在需要时加载）
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>Loading...</p>,
});

function HomePage() {
  return <DynamicComponent />;
}
</syntaxhighlight>

'''效果'''：  
初始页面仅加载核心代码，<code>HeavyComponent</code> 在渲染时异步加载。

=== 2. 静态生成与增量静态再生（ISR） ===  
对于内容不频繁变化的页面，使用 SSG；对于动态内容，结合 ISR 定期更新静态页面。

<syntaxhighlight lang="javascript">
// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const post = await getPostData(params.slug);
  return { props: { post }, revalidate: 60 }; // 每60秒重新生成
}
</syntaxhighlight>

'''适用场景'''：  
博客、电商产品页等，ISR 在后台更新数据，用户始终看到缓存的最新版本。

=== 3. 图像优化（Image Optimization） ===  
Next.js 的 <code>next/image</code> 组件自动优化图片格式、尺寸和懒加载。

<syntaxhighlight lang="javascript">
import Image from 'next/image';

<Image
  src="/profile.jpg"
  alt="Profile"
  width={500}
  height={500}
  priority // 关键图片预加载
/>
</syntaxhighlight>

'''优化项'''：  
- 自动转换为 WebP 格式  
- 按视口大小提供响应式图片  

=== 4. 客户端导航与预加载 ===  
Next.js 的 <code>next/link</code> 自动预加载路由资源，提升页面切换速度。

<syntaxhighlight lang="javascript">
import Link from 'next/link';

<Link href="/about" prefetch={false}> // 禁用预加载（适用于低频访问页）
  About
</Link>
</syntaxhighlight>

=== 5. 缓存策略 ===  
通过 HTTP 头或 Service Worker 控制缓存行为。

<syntaxhighlight lang="javascript">
// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*).jpg',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};
</syntaxhighlight>

== 高级优化 ==

=== 1. 使用 Web Vitals 监控 ===  
Next.js 内置 <code>reportWebVitals</code> API，可跟踪性能指标。

<syntaxhighlight lang="javascript">
// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric); // 输出 LCP、FID 等指标
}
</syntaxhighlight>

=== 2. 减少 JavaScript 体积 ===  
通过分析工具（如 <code>@next/bundle-analyzer</code>）识别冗余依赖。

<syntaxhighlight lang="bash">
npm install @next/bundle-analyzer
</syntaxhighlight>

配置 <code>next.config.js</code>：  
<syntaxhighlight lang="javascript">
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});
</syntaxhighlight>

=== 3. 服务端组件（React Server Components） ===  
Next.js 13+ 支持服务端组件，减少客户端 JS 负担。

<syntaxhighlight lang="javascript">
// app/page.js
async function ServerComponent() {
  const data = await fetchData(); // 仅在服务端执行
  return <div>{data}</div>;
}
</syntaxhighlight>

== 性能优化流程图 ==  
<mermaid>
graph TD
  A[分析当前性能] --> B{静态内容?}
  B -->|是| C[使用 SSG/ISR]
  B -->|否| D[SSR 或 CSR]
  C --> E[优化图片与资源]
  D --> F[代码拆分与懒加载]
  E --> G[配置缓存策略]
  F --> G
  G --> H[监控 Web Vitals]
</mermaid>

== 实际案例 ==  
'''案例：电商首页优化'''  
1. 使用 SSG 生成静态产品目录。  
2. 通过 <code>next/image</code> 压缩商品图片。  
3. 动态导入评价组件（CSR）。  
4. 设置 <code>Cache-Control</code> 缓存商品图片。  

'''结果'''：  
- LCP（最大内容绘制）从 2.4s 降至 1.1s。  
- 首次输入延迟（FID）优化 40%。  

== 公式与计算 ==  
关键指标计算：  
<math>
\text{Performance Score} = 0.6 \times \text{LCP} + 0.3 \times \text{FID} + 0.1 \times \text{CLS}
</math>

== 总结 ==  
Next.js 性能优化需结合渲染策略、资源加载和监控工具。通过本文的技术组合，可显著提升用户体验与搜索引擎排名。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js渲染策略]]