Экосистема Nuxt: предзагрузка шрифтов по маршрутам и ускорение рендеринга иконок

В веб-разработке на базе современных мета-фреймворков скорость первой отрисовки экрана (Core Web Vitals) часто упирается не в тяжелый JavaScript, а в базовые визуальные ассеты. Когда пользователь заходит на страницу, он ждет мгновенного появления текста и графики. Если шрифт подгружается с задержкой, возникает неприятное мигание невидимого текста (FOIT) или паразитный сдвиг макета (CLS), а сотни мелких SVG-иконок в серверном рендеринге способны ощутимо нагрузить процессор воркера.

Команда ядра Nuxt под руководством Дэниела Роу (Daniel Roe) синхронно выпустила обновления двух ключевых модулей экосистемы, отвечающих за оптимизацию статических ресурсов: Nuxt Fonts v1.2.0 и Nuxt Icon v2.6.1. Давай разберём, как эти точечные релизы помогают ускорить отдачу страниц и стабилизировать серверный рендеринг.

Nuxt Fonts v1.2.0

Модуль Nuxt Fonts решает задачу локального хостинга веб-шрифтов: он автоматически скачивает нужные файлы гарнитур (из Google Fonts, Fontshare или локальных папок), генерирует правильные CSS-метрики для предотвращения сдвига верстки и устраняет внешние трекеры.

Однако до версии v1.2.0 разработчики сталкивались с дилеммой при предзагрузке. Если включить директиву preload глобально, браузер начинал жадно выкачивать тяжелые начертания на всех страницах сайта подряд — даже в админке или личном кабинете, где они не использовались.

В Nuxt Fonts v1.2.0 появилась долгожданная интеграция с серверными правилами маршрутизации Nitro routeRules. Теперь ты можешь декларативно указать, на каких конкретно маршрутах нужно отдавать заголовок Link: <...>; rel=preload:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/fonts', '@nuxt/icon'],

  fonts: {
    families: [
      { name: 'Inter', provider: 'google' },
      { name: 'Montserrat', provider: 'google', weights: [600, 700] },
    ],
  },

  // Гранулярная предзагрузка шрифта только для главной посадочной страницы
  routeRules: {
    '/': {
      headers: {
        'Link': '</_nuxt/fonts/montserrat-latin-700.woff2>; rel=preload; as=font; type=font/woff2; crossorigin',
      },
    },
    '/_nuxt/fonts/**': {
      headers: {
        'Cache-Control': 'public, max-age=31536000, immutable',
      },
    },
  },
})

Кроме того, разработчики исправили давнюю проблему с наборами глифов unicode-range: раньше шрифты с фрагментированными диапазонами символов пропускались сборщиком из-за риска выкачать лишние байты. Теперь предзагрузка работает стабильно для любых языковых подмножеств.

Если шрифты задают форму текста, то за визуальные акценты в интерфейсе отвечают векторные иконки, и здесь команда подготовила не менее важное улучшение серверной производительности.

Nuxt Icon v2.6.1

Модуль Nuxt Icon предоставляет доступ к сотням тысяч векторных символов из каталога Iconify и локальных SVG-спрайтов. При активном использовании серверного рендеринга (SSR) на страницах интернет-магазинов или дашбордов могут выводиться сотни иконок.

В версии Nuxt Icon v2.6.1 фокус сделан на ликвидации лишних вычислений в рантайме:

Мемоизация сгенерированного CSS: ранее серверный движок Nitro компилировал стили для иконок заново при каждом входящем HTTP-запросе. Теперь скомпилированные CSS-правила кэшируются в памяти процесса, снижая нагрузку на CPU воркера.
Однократная сортировка коллекций: имена доступных коллекций иконок сортируются строго один раз при инициализации приложения, а не при каждом рендере компонента <Icon>.
Защита от переполнения HTTP-заголовков (PR #551): при работе с кастомными загрузчиками длинные URL-запросы автоматически разбиваются на чанки, предотвращая сбои с ошибками 414 URI Too Long и 431 Request Header Fields Too Large на прокси-серверах Cloudflare и Nginx.
Сохранение приоритета @layer: отложенно подгружаемые иконки не ломают каскад стилей благодаря фиксации слоя CSS.

Использование оптимизированных иконок в Vue-шаблоне остается максимально простым и декларативным:

<template>
  <header class="hero-section">
    <h1 class="font-montserrat">Быстрый старт на Nuxt</h1>
    <!-- Мемоизированная иконка в режиме генерации CSS -->
    <Icon name="heroicons:bolt-20-solid" class="text-amber-500 w-6 h-6" />
  </header>
</template>

Синхронный апдейт модулей отражает общий вектор развития платформы, который мы отмечали еще при выходе релиза Nuxt с модульным рантаймом: превратить оптимизацию производительности из ручной рутины в прозрачное поведение фреймворка.

Комбинация предзагрузки шрифтов в Nuxt Fonts v1.2.0 и мемоизации стилей в Nuxt Icon v2.6.1 позволяет закрыть две главные причины просадки метрик LCP и CLS без усложнения кодовой базы проекта. Обновляйте зависимости в package.json и проверяйте показатели в PageSpeed Insights.