Как оптимизировать сборку на Nuxt

Введение

Когда вы работаете с современным фреймворком Nuxt (и особенно при создании production проектов), важно не только быстро и удобно разрабатывать, но и заботиться о времени загрузки сайта, размере бандла и производительности в целом. Базовая конфигурация Nuxt хороша уже "из коробки", но может быть нелишним обратить внимание на дополнительные возможности по оптимизации сборки — от правильной настройки treeshaking, до внедрения современных инструментов для сокращения веса вашего приложения.

В этой статье мы детально разберем подходы и инструменты для оптимизации сборки Nuxt-проектов, дадим рекомендации по настройке, покажем примеры кода и объясним, как эти изменения сказываются на финальном результате.

Используйте режим производства (production mode)

Перед тем как углубиться в тонкие настройки, важно убедиться, что вы собираете проект именно для продакшена. Nuxt автоматически использует production mode, когда вы запускаете сборку с помощью команды:

nuxt build

В режиме производства автоматически выполняется минификация кода, удаляются ненужные комментарии и делается многое другое для оптимизации вывода ресурса. Применяйте эту команду только для продакшн-инстансов. Для разработки используйте nuxt dev — он не оптимизирует сборку, зато ускоряет hot-reload.

Оптимизация сборки — это важный шаг для улучшения производительности Nuxt-приложения. Чем быстрее собирается приложение, тем быстрее можно вносить изменения и развертывать его на сервере. Умение оптимизировать сборку — это полезный навык для любого Nuxt-разработчика. Если вы хотите детальнее погрузиться в мир Nuxt, освоить все его тонкости и стать настоящим профессионалом — приходите на наш большой курс Nuxt - fullstack Vue фреймворк. На курсе 129 уроков и 13 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Минификация и оптимизация JavaScript и CSS

Основные настройки минификации

Nuxt сам по себе использует webpack (Nuxt 2) или Vite/Webpack (Nuxt 3). Для продакшен-сборки стандартно настроен terser (или esbuild/minify), который "сжимает" js и css.

Вы можете дополнительно конфигурировать минификацию:

Пример настройки минификации в nuxt.config.js (Nuxt 2)

// nuxt.config.js
export default {
  build: {
    terser: {
      terserOptions: {
        compress: { drop_console: true } // Убирает все console.log из сборки
      }
    },
    extractCSS: true, // Вынести все CSS в отдельные файлы
  }
}

Здесь drop_console: true удаляет из итогового js все вызовы консоли. Опция extractCSS: true помогает вынести весь css из js-бандла в отдельные файлы, что улучшает кэширование стилей и ускоряет загрузку.

Пример для Nuxt 3

В Nuxt 3 минификация js и css включена по умолчанию, а чтобы передать опции можете воспользоваться Vite или webpack плагинами через поле vite в nuxt.config.ts:

export default defineNuxtConfig({
  vite: {
    build: {
      minify: 'esbuild', // Можно указать terser или esbuild
    }
  }
})

Научитесь делить бандлы и использовать динамический импорт

Code Splitting и Lazy Loading

Code Splitting — это практика разбиения большого javascript-файла на отдельные чанки, которые подгружаются только тогда, когда это нужно пользователю. Nuxt внедряет этот механизм автоматически, но вы можете влиять на его работу вручную, используя динамические импорты.

Пример динамического импорта компонента

// pages/about.vue
<template>
  <div>
    <client-only>
      <LazyComponent />
    </client-only>
  </div>
</template>

<script>
export default {
  components: {
    // Компонент будет загружен только при необходимости
    LazyComponent: () => import('~/components/LazyComponent.vue')
  }
}
</script>

Здесь компонент подгружается только когда нужен (по требованию). Это сокращает первоначальный размер основного бандла страницы.

Использование директивы client-only

Часто бывает так, что компонент должен работать только на клиенте (например, heavy визуализация или библиотека, для которой SSR не нужен). Директива <client-only> предотвращает отрисовку такого компонента на сервере, что ускоряет рендеринг и уменьшает нагрузку.

Включайте и настраивайте treeshaking для зависимости

Treeshaking — процесс удаления неиспользуемых экспортов из подключаемых библиотек. Если ваша библиотека "side-effect free", то webpack/vite удаляет неиспользуемый код автоматически.

Если библиотека не помечена как "sideEffects": false, вы можете указать это в своем package.json:

{
  "sideEffects": false
}

Это подскажет bundler-у: "Можно смело выкидывать все неиспользуемое из этого пакета".

Анализируйте размер бандла и оптимизируйте зависимости

Используйте анализаторы бандлов

Без инструментов визуализации легко упустить из виду лишний вес каких-то библиотек или одинаковые зависимости, попадающие в собираемый итоговый js/css.

Как подключить анализатор бандла (webpack-bundle-analyzer) в Nuxt 2

// Установите пакет
npm install @nuxtjs/webpack-bundle-analyzer --save-dev

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/webpack-bundle-analyzer'
  ],
  webpackBundleAnalyzer: {
    analyzerMode: 'static'
  }
}

Теперь после сборки появится html-отчет с визуализацией размера модулей.

Для Nuxt 3 (Vite)

В Nuxt 3 можно добавить vite-плагин vite-plugin-visualizer:

npm install vite-plugin-visualizer --save-dev

// nuxt.config.js
import { visualizer } from 'vite-plugin-visualizer'

export default defineNuxtConfig({
  vite: {
    plugins: [visualizer()]
  }
})

Это даст вам файл-отчет после сборки.

Оптимизируйте статические ресурсы (изображения, шрифты)

Сжимайте изображения

Самый эффективный способ уменьшить размер страницы — уменьшить вес картинок. Nuxt и экосистема предоставляют для этого подходящие модули.

Nuxt Image Module

Модуль @nuxt/image позволяет оптимально обрабатывать изображения, автоматически подгонять их размеры и даже сжимать.

npm install @nuxt/image

export default {
  modules: [
    '@nuxt/image'
  ],
  image: {
    // Настройки оптимизации
    formats: ['webp', 'jpeg'] // webp - самый компактный формат
  }
}

И потом вы используете: html <nuxt-img src="/img/photo.jpg" width="400" height="300" format="webp" /> Модуль сам выберет нужный формат на лету.

Уменьшайте иконки с помощью SVG-спрайтов

Вместо множества svg/png иконок — используйте единый svg-спрайт. Для этого отлично подходят плагины типа vite-svg-loader (Nuxt 3) или специальные Nuxt модули.

Используйте HTTP/2, кэширование и CDN

Включайте HTTP/2 и CDN

Передавая статику через CDN, вы существенно ускоряете отдачу файлов пользователям по всему миру, а HTTP/2 позволяет браузеру получать сразу несколько файлов параллельно.

Настройка CDN через директиву assetURL

В nuxt.config.js можно указать свой CDN в PublicPath:

export default {
  build: {
    publicPath: 'https://cdn.yoursite.com/_nuxt/'
  }
}

Теперь скрипты и статика будут грузиться с CDN.

Используйте Prefetch и Preload для критичных ресурсов

Настройка Prefetch и Preload

Nuxt по умолчанию проставляет prefetch ссылок для следующих страниц, но вы можете это контролировать.

// nuxt.config.js
export default {
  router: {
    prefetchLinks: true // или false для отключения
  }
}

Для индивидуальных ресурсов используйте nuxt/head:

<template>
  <div />
</template>

<script>
export default {
  head() {
    return {
      link: [
        { rel: 'preload', as: 'script', href: '/path/to/script.js' }
      ]
    }
  }
}
</script>

Это позволит критически важным ресурсам подгружаться раньше.

Оптимизация SSR: кеширование и автоматизация

Кеширование страниц

Если проект работает в режиме SSR, отдавать популярные страницы из кэша гораздо быстрее, чем рендерить их при каждом запросе.

Пример кеширования в Nuxt 2 (с помощью nuxt-server-cache)

npm install @nuxtjs/component-cache

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/component-cache'
  ],
  componentCache: {
    max: 10000,
    maxAge: 1000 * 60 * 60 // 1 час
  }
}

В Nuxt 3 кеш таких страниц проще реализовать средствами серверной инфраструктуры (например, nginx, redis, vercel edge functions).

Используйте автоматическую генерацию статических страниц

Для максимально быстрого ответа с сервера используйте режим nuxt generate (Nuxt 2) или nuxt build --preset static (Nuxt 3).

Tree-shaking, externals и уменьшение итоговых бандлов

Подключение внешних библиотек через CDN (externals)

Если вы подключаете большие библиотеки, используйте CDN, чтобы не тащить лишний js в бандл.

// nuxt.config.js
export default {
  build: {
    extend(config, ctx) {
      if (ctx.isClient) {
        config.externals = {
          'lodash': '_'
        }
      }
    }
  }
}

Теперь lodash не будет добавляться в ваши чанки, а возьмется из CDN.

Оптимизация CSS: PurgeCSS, постпроцессинг, критические стили

Удаление неиспользуемых стилей

Многие css-фреймворки (например, TailwindCSS) могут сильно раздуть итоговый бандл, если не убирать неиспользуемые стили.

Пример для Tailwind в Nuxt 3

В tailwind.config.js укажите:

module.exports = {
  content: [
    './pages/**/*.{js,vue,ts}',
    './components/**/*.{js,vue,ts}'
    // Добавьте все пути, где используется CSS
  ]
}

И включите режим purge — тогда теги и классы, не найденные в ваших шаблонах, будут удалены из финального CSS.

Используйте современные модули и плагины

Nuxt Compression Module

Для сжатия файлов на уровне сервера можно воспользоваться nuxt-compression:

npm install @nuxtjs/compression

export default {
  modules: [
    '@nuxtjs/compression'
  ],
  compression: {
    gzip: { threshold: 8192 }, // Минимизировать только файлы больше 8К
    brotli: { threshold: 8192 }
  }
}

Nuxt PWA для оффлайна

Модуль Nuxt PWA поможет использовать кэширование для ускорения повторных загрузок и оффлайн-доступность приложения.

npm install @nuxtjs/pwa

export default {
  modules: [
    '@nuxtjs/pwa'
  ]
}

Заключение

Оптимизация сборки Nuxt — это совокупность взаимосвязанных практик, которые на практике позволяют добиться плавной загрузки сайта, повысить производительность и снизить объемы передаваемых данных. Начиная с базовой настройки режима production, вы переходите к последовательному улучшению структуры бандла через динамические импорты, разделение чанков, использование кэшей и внешних CDN. Задействуйте анализаторы, следите за размером ресурсов и не забывайте про тонкую настройку сторонних зависимостей, чтобы в итоге ваш проект работал максимально быстро и стабильно.

Чтобы создавать быстрые и отзывчивые приложения, необходимо также оптимизировать код, использовать кэширование и настраивать серверную часть. На курсе Nuxt - fullstack Vue фреймворк вы получите комплексные знания и практический опыт, необходимые для создания профессиональных веб-приложений на Nuxt. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир Nuxt прямо сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Как убрать warning "memory leak" или "event listeners" при сборке Nuxt?

Добавьте в nuxt.config.js параметры для контроля лимитов listeners: js build: { extend(config) { config.node = { fs: 'empty' } // Если warning связан с fs // Для warnings про listeners, увеличьте лимиты на стороне node require('events').EventEmitter.defaultMaxListeners = 20 } }

Как ускорить первый запуск страницы при SSG (nuxt generate)?

Проверьте размер и количество изображений, используемых на каждой странице, используйте nuxt/image, и пересмотрите подключаемые скрипты — отключите в head все ненужное.

Почему не работает динамический импорт компонента?

Убедитесь, что импорт делаете как функцию, и название компонента начинается с заглавной буквы: js components: { LazyComponent: () => import('~/components/LazyComponent.vue') }

Как убрать повторяющиеся зависимости (дубликаты библиотек) в бандле?

Проверьте package.json на повтор/lib версии, используйте alias в nuxt.config.js: js build: { extend(config) { config.resolve.alias['lodash'] = require.resolve('lodash') } }

Как ускорить rebuild при разработке?

Для Nuxt 2 используйте флаг build.cache: true, для Nuxt 3 — vite cache работает автоматически. Также уберите ненужные плагины и следите, чтобы ваш node_modules не был слишком "раздут".