编辑“︁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>