22. Производительность

⚡ Производительность Nuxt 3

Nuxt 3 предоставляет широкий набор инструментов для оптимизации производительности: от автоматической оптимизации бандла до edge-деплоя ближе к пользователю.

---

📦 Payload Extraction

payloadExtraction позволяет отделить данные страницы от JavaScript-бандла:

nuxt.config.ts

export default defineNuxtConfig({
  experimental: {
    payloadExtraction: true
  }
})

При статической генерации Nuxt создаёт отдельный _payload.json для каждой страницы:

dist/
├── _nuxt/          # JS/CSS бандлы
├── about/
│   ├── index.html
│   └── _payload.json  # данные страницы
└── blog/
    ├── my-post/
    │   ├── index.html
    │   └── _payload.json

Преимущества:

• Меньший начальный HTML
• Данные загружаются параллельно со скриптами
• Лучший кеш для повторных посещений

---

🔄 NuxtLoadingIndicator

Встроенный индикатор загрузки при навигации:

app.vue

<template>
  <div>
    <NuxtLoadingIndicator
      :height="3"
      :duration="2000"
      :throttle="200"
      color="#00dc82"
    />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

assets/css/loading.css

// Кастомизация через CSS
.nuxt-loading-indicator {
  background: linear-gradient(90deg, #00dc82, #00b4d8) !important;
}

---

🔗 Preloading и Prefetching с NuxtLink

<!-- Prefetch при наведении (по умолчанию) -->
<NuxtLink to="/about" prefetch>О нас</NuxtLink>

<!-- Немедленный prefetch при монтировании -->
<NuxtLink to="/dashboard" prefetch prefetch-on="mount">
  Дашборд
</NuxtLink>

<!-- Prefetch только при видимости в viewport -->
<NuxtLink to="/products" prefetch prefetch-on="visible">
  Продукты
</NuxtLink>

<!-- Без prefetch -->
<NuxtLink to="/admin" :prefetch="false">
  Администрирование
</NuxtLink>

nuxt.config.ts

// Глобальная настройка prefetch
export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        prefetch: true,
        prefetchOn: {
          visibility: true,
          interaction: true
        }
      }
    }
  }
})

---

🔥 Оптимизация бандла

Анализ размера бандла

npm install -D rollup-plugin-visualizer

# Запуск анализа
nuxt build --analyze
# или
NUXT_ANALYZE=true nuxt build

nuxt.config.ts

export default defineNuxtConfig({
  build: {
    analyze: {
      analyzerMode: 'server',
      openAnalyzer: true
    }
  }
})

Разделение чанков

nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            'vendor-vue': ['vue', 'vue-router'],
            'vendor-utils': ['lodash-es', 'date-fns'],
            'ui-components': ['@headlessui/vue', '@heroicons/vue']
          }
        }
      }
    }
  }
})

---

💾 Кеширование

Route Rules (Nitro)

nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    // Статический HTML (SGS)
    '/': { prerender: true },

    // Кеш на CDN 1 час
    '/blog/**': { swr: 3600 },

    // Кеш на 1 день + ISR
    '/docs/**': { isr: 86400 },

    // Без кеша (всегда SSR)
    '/dashboard/**': { ssr: true },

    // Только клиент (SPA)
    '/app/**': { ssr: false },

    // Редирект
    '/old-path': { redirect: '/new-path' }
  }
})

Кеширование API-ответов

server/api/popular-posts.ts

export default defineCachedEventHandler(async (event) => {
  const posts = await fetchPopularPosts()
  return posts
}, {
  maxAge: 60 * 10, // 10 минут
  name: 'popular-posts',
  getKey: () => 'popular-posts'
})

---

🛠️ Nuxt DevTools

Nuxt DevTools — встроенный инструмент разработки:

nuxt.config.ts

export default defineNuxtConfig({
  devtools: {
    enabled: true,
    // Все вкладки
    tabs: true,
    // Профилировщик Vue
    vueInspector: true
  }
})

Возможности DevTools:

• 📊 Анализ компонентов и страниц
• 🔌 Просмотр загруженных модулей и плагинов
• 🗃️ Инспектор состояния (Pinia stores)
• 🌐 Просмотр серверных маршрутов
• 📦 Анализ импортов и автоимпортов

---

🌐 Edge Deployment

Nitro поддерживает деплой на edge-платформы:

// nuxt.config.ts — деплой на Cloudflare Workers
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare-pages'
  }
})

// Vercel Edge Functions
export default defineNuxtConfig({
  nitro: {
    preset: 'vercel-edge'
  },
  routeRules: {
    '/api/**': {
      headers: {
        'x-vercel-cache': 'MISS'
      }
    }
  }
})

---

📈 Web Vitals оптимизация

Core Web Vitals в Nuxt

LCP (Largest Contentful Paint):

<!-- Preload critical images -->
<NuxtImg
  src="/hero.jpg"
  preload
  loading="eager"
  :placeholder="false"
  fetchpriority="high"
/>

CLS (Cumulative Layout Shift):

<!-- Всегда задавайте width/height -->
<NuxtImg
  src="/photo.jpg"
  width="800"
  height="600"
  alt="Фото"
/>

FID/INP (Interaction to Next Paint):

// Ленивая загрузка тяжёлых компонентов
const HeavyChart = defineAsyncComponent(() =>
  import('~/components/HeavyChart.vue')
)

---

🗜️ Сжатие и минификация

nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    compressPublicAssets: {
      gzip: true,
      brotli: true
    },
    minify: true
  },
  vite: {
    build: {
      minify: 'esbuild',
      cssMinify: true,
      reportCompressedSize: true
    }
  }
})

---

📋 Чеклист производительности

Оптимизация	Инструмент	Влияние
Оптимизация изображений	@nuxt/image	Высокое
Code splitting	Vite автоматически	Высокое
SSR/SSG/ISR	routeRules	Высокое
Edge deployment	Nitro presets	Высокое
Prefetching	NuxtLink	Среднее
Payload extraction	experimental	Среднее
Bundle analysis	rollup-visualizer	Диагностика
Compression	Nitro	Среднее

---