Перейти к основному содержимому

[Lv3] Оптимизация производительности Nuxt 3: размер bundle, скорость SSR и доставка изображений

Практическое руководство по оптимизации производительности Nuxt 3: от результатов сборки и задержки серверного рендеринга до доставки медиаконтента.

1. Структура ответа на собеседовании​

  1. Оптимизация размера bundle
  2. Оптимизация SSR/TTFB
  3. Оптимизация изображений
  4. Стратегия рендеринга больших данных

2. Оптимизация размера bundle​

Сначала анализ​

npx nuxi analyze

Определите тяжёлые зависимости и рост общих chunk'ов.

Осознанное разделение и ленивая загрузка​

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (!id.includes('node_modules')) return;
            if (id.includes('echarts')) return 'vendor-echarts';
            if (id.includes('lodash')) return 'vendor-lodash';
          },
        },
      },
    },
  },
});
  • Используйте ленивую загрузку на уровне маршрутов и компонентов
  • Предпочитайте выборочные импорты вместо импорта целых библиотек

3. Скорость SSR и TTFB​

Избегайте блокирующего водопада SSR​

  • Параллелизуйте независимые вызовы API
  • Добавьте кеширование для ресурсоёмких API чтения
  • Перенесите некритические запросы на фазу клиентской гидратации
const [profile, metrics] = await Promise.all([
  $fetch('/api/profile'),
  $fetch('/api/metrics'),
]);

Используйте кеширование Nitro где уместно​

export default cachedEventHandler(
  async () => {
    return await fetchDashboardSnapshot();
  },
  { maxAge: 60 }
);

4. Доставка изображений​

  • Используйте @nuxt/image с современными форматами
  • Задайте width/height и правильные sizes
  • Ленивая загрузка медиа ниже первого экрана
  • Раздача через CDN ближе к пользователям
<NuxtImg
  src="/hero/banner.jpg"
  format="webp"
  width="1200"
  height="630"
  sizes="sm:100vw md:100vw lg:1200px"
  loading="lazy"
/>

5. Чек-лист мониторинга в рантайме​

  • JS-нагрузка на уровне маршрутов
  • TTFB и LCP в продакшене
  • Коэффициент попаданий в кеш
  • Задержка API p95
  • Размер передачи изображений и заголовки кеширования

Краткое резюме для собеседования​

В Nuxt 3 я оптимизирую, сначала анализируя состав bundle, затем уменьшая стартовый JS через ленивую загрузку и стратегию chunk'ов, улучшая TTFB SSR параллельным fetch'ем и кешированием, и доставляя изображения через @nuxt/image + CDN. Я валидирую результаты продакшен-метриками, а не предположениями.