Улучшения статики Nuxt 2

Введение

С версии Nuxt 2.13 был представлен полностью статический режим. Кроме того, была добавлена новая команда nuxt export для предварительного рендеринга ваших страниц без запуска сборки webpack с целью разделить процесс рендеринга и сборки. Единственной проблемой было то, что большинство пользователей Nuxt не могли раскрыть весь потенциал разделения... пока что.

• Введение
• Быстрое статическое развертывание
• Время генерации: кэш против полной сборки webpack
• Использование в ваших проектах
  • Исключение файлов из кэша
  • Авторы модулей
• Как это работает
  • Возвращение к старым командам
• Что делать дальше

Быстрое статическое развертывание

С версии 2.14 nuxt generate автоматически пропустит шаг сборки webpack, если код не был изменен, и будет использовать предыдущую сборку с помощью кэша. Это поможет значительно сократить время статического развертывания, избегая ненужных сборок, которые обычно являются наиболее затратной по времени частью процесса генерации. Поддержка кэша является платформенно-независимой и работает на Netlify, Vercel или любом другом настроенном CI/CD, который кэширует node_modules.

Время генерации: кэш против полной сборки webpack

Сравните время в секундах между двумя nuxt generate:

• Build когда требуется сборка webpack
• Cache только когда изменилось содержимое (сборка webpack пропущена)

Ссылки на проекты: Basic, Strapi Module Docs, Content Module Docs и Nuxt 2 Docs.

Использование в ваших проектах

1. Обновите nuxt до последней дополнительной версии, которой является v2.14.

npm update

2. Убедитесь, что target имеет значение static в вашем nuxt.config
   nuxt.config.js

   export default {
     target: 'static'
     // ...
   }
   

nuxt generate будет вести себя так же, как и раньше, чтобы избежать изменений, несовместимых с предыдущими версиями, и обеспечить обратную совместимость, если вы сохраните target: ‘server’ или не укажете совсем.

3. Это все 🙌

Теперь команда nuxt generate будет создавать проект только при необходимости, то есть когда файлы в проекте были изменены. Она всегда повторно рендерит ваши маршруты в статические HTML-файлы, как это уже делает nuxt export.

Теперь вам нужно изменить команду сборки с nuxt build && nuxt export на nuxt generate на платформе, которую вы используете. Если вы используете CI, убедитесь, что вы правильно кэшируете node_modules.

Исключение файлов из кэша

По умолчанию nuxt игнорирует эти директории, так что если в них произойдут изменения, сборка не будет запущена:

• Директория сборки (.nuxt/)
• Директория статики (static/)
• Директория генерации (dist/)
• node_modules
• README.md
• Скрытые файлы (например, .npmrc)

Вы можете добавить больше шаблонов с помощью параметра generate.cache.ignore в nuxt.config:

export default {
  generate: {
    cache: {
      ignore: [
        // Когда что-то изменилось в папке docs, не пересобирайте через webpack
        'docs'
      ]
    }
  }
}

Также можно использовать функцию для параметра ignore, чтобы переопределить стандартные записи игнорирования.

Авторы модулей

Что делать, если вы разрабатываете модуль nuxt, который работает с файлами, которые не должны запускать повторную сборку? Лучшим примером является модуль @nuxt/content, который читает файлы markdown из репозитория. В этом случае эти файлы используются в runtime-модуле, что имеет место при использовании @nuxt/content, сам модуль может сообщить nuxt игнорировать эти файлы для вас, так что вам не нужно ничего делать! Авторы модулей могут использовать новый хук generate:cache:ignore для этого:

nuxt.hook('generate:cache:ignore', ignore => ignore.push('content'))

Как это работает

При использовании новой команды nuxt generate с целью static будет создан снимок, включающий контрольную сумму файлов проекта, не включенных в игнорирование, версию nuxt и некоторую другую конфигурацию, и записан в .nuxt/build.json. Кроме того, мы также перемещаем директорию сборки в node_modules/.cache/nuxt. Поскольку node_modules кэшируется всеми основными платформами (Netlify, Vercel, ...) и общими скриптами CI/CD, это решение работает из коробки без дополнительной настройки.

При последующем вызове nuxt generate он снова создаст контрольную сумму на основе файлов вашего проекта и сравнит ее с существующей в node_modules/.cache/nuxt/build.json.

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

Если обнаружено несоответствие, это означает, что потребуется полная пересборка. Вы также можете увидеть, какой файл вызвал повторную сборку, проверив журналы консоли. После сборки nuxt generate сохранит новую контрольную сумму в .nuxt/build.json. Вы можете проверить полную реализацию здесь.

Возвращение к старым командам

С версии Nuxt v2.13 мы представили команды nuxt export и nuxt serve, специально разработанные для статической цели. С версии Nuxt v2.14 они устарели, поскольку nuxt generate и nuxt start умны для определения цели и сборки при необходимости.

Для SSR:

• nuxt dev = сервер разработки
• nuxt build = сборка вашего приложения для продакшена
• nuxt start = запуск сервера продакшена (используйте его для хостинга Node.js, такого как Heroku, Digital Ocean и т.д.)

Для статического режима:

• nuxt dev = сервер разработки
• nuxt generate = сборка при необходимости и статический экспорт в dist/
• nuxt start = предоставление директории dist/ так, как это делает ваш статический хостинг (Netlify, Vercel, Surge и т.д.). Отлично для тестирования перед развертыванием

Что делать дальше

• Обновите ваш проект до nuxt@2.14.0
• Используйте nuxt generate вместо nuxt export
• Используйте nuxt start вместо nuxt serve
• Наслаждайтесь быстрым развертыванием 🤙