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

[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. Я валидирую результаты продакшен-метриками, а не предположениями.