Nuxt.js 应用性能优化有哪些关键手段？

Nuxt 性能优化分三层：构建层利用 Nitro 做 payload 提取，将 SSR 数据抽到独立 JSON 避免重复内联；渲染层通过 routeRules 按Route规则混合 SSR/SSG/SPA，静态页面用 prerender 避免运行时渲染开销；资源层用 @nuxt/image 自动生成响应式 srcset 和 WebP 格式，LazyHydrate 延迟水合非首屏组件。此外 Nuxt 3 基于 Vite 的按需编译和 tree-shaking 本身就比 Nuxt 2 的 Webpack 产物更小。

追问

• payload extraction 具体做了什么？对 TTFB 有多大影响？
• @nuxt/image 的 ipx 服务是做什么的？和直接用 CDN 图片处理有什么区别？
• Nuxt 3 的 LazyHydrate 组件怎么用？和 Vue 的 Suspense 有什么关系？
• Nitro 的缓存策略（cachedFunctions）怎么配置？
• 静态资源加 hash 缓存后，怎么处理版本更新问题？

写段代码

js
// nuxt.config.ts - 性能优化配置
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  routeRules: {
    '/blog/**': { swr: 3600 },    // ISR: 1小时缓存
    '/admin/**': { ssr: false },   // SPA: 跳过SSR
    '/': { prerender: true }       // SSG: 构建时生成
  },
  experimental: { payloadExtraction: true }
})