Изучите Nuxt с коллекцией из 100+ советов!
Релиз·  

Nuxt 3.7

Вышел Nuxt 3.7 с новым CLI, нативными веб-стримами и ответами, оптимизацией рендеринга, поддержкой асинхронного контекста и многим другим

🐣 Новый CLI

Мы переделали nuxi используя unjs/citty, и это первый релиз Nuxt, который зависит от новой версии, безопасно в своем собственном репозитории. У нас есть грандиозные планы на этот счет — ознакомьтесь с некоторыми функциями + обсуждениями дорожной карты в nuxt/cli и, пожалуйста, не стесняйтесь вносить свой вклад!

Nuxi теперь отделена от основной версии nuxt - мы планируем в будущем быстрее обновлять и выпускать nuxi, так что вы можете ожидать новых вещей в ближайшее время!

🕸️ Нативные веб-стримы и Response

Благодаря улучшениям в unjs/h3 и unjs/nitro теперь можно напрямую возвращать объект Response из серверных маршрутов, что означает также возможность возвращать и обрабатывать стримы нативно.

👉 Подробную информацию смотрите в описании релизов unjs/h3 и unjs/nitro.

🔥 Оптимизация рендеринга HTML

Этот релиз поставляется с парой улучшений в рендеринге HTML-ответов с сервера. Теперь мы определяем, следует ли предварительно загружать/предварительно извлекать ресурсы во время сборки (чтобы вы могли настроить это в хуке build:manifest). Теперь мы также управляем рендерингом HTML для них непосредственно в unhead (#22179), что означает, что вы можете настроить order для <link>, <meta>, <script>, <style> и т.д. И - в нашем предварительном тестировании - это стало еще быстрее!

Можно подписаться на предстоящие улучшения head с помощью флага experimental.headNext. В настоящее время он включает новый алгоритм упорядочивания на основе capo.js (#22431) и позволяет включать будущие оптимизации по мере их выпуска в unhead:

export default defineNuxtConfig({
  experimental: {
    headNext: true
  }
})

Мы будем рады услышать ваши мысли. Вы можете ответить на любые вопросы/отзывы в этом обсуждении.

🛠️ Сокращения для настройки окружения сборки

В конфигурации Nuxt теперь можно использовать сокращения $client и $server, чтобы легко определить конфигурацию, специфичную только для сборок клиента/сервера Vite (#22302) или клиента/сервера webpack (#22304). Ранее это было возможно только с помощью хуков vite:extendConfig и webpack:config.

Например:

export default defineNuxtConfig({
  vite: {
    $client: {
      build: {
        rollupOptions: {
          output: {
            chunkFileNames: '_nuxt/[hash].js',
            assetFileNames: '_nuxt/[hash][extname]',
            entryFileNames: '_nuxt/[hash].js'
          }
        }
      }
    }
  }
})

⚡️ Vite 4.4

Мы решили открепить Vite от минорных версий, то есть, когда Vite выпускает новую версию функции, вы можете сразу же подключиться к ней. Vite 4.4 приносит много интересных вещей, включая экспериментальную поддержку Lightning CSS — и многое другое!

👉 Более подробную информацию можно найти в заметках о выпуске Vite.

💪 Обновления TypeScript

Теперь мы используем чистые относительные пути в сгенерированном tsconfig.json вместо установки baseUrl. Это означает лучшую поддержку для сред разработки, таких как образы docker, где абсолютный путь может не соответствовать вашей IDE (#22410).

Мы также установили несколько дополнительных флагов компилятора по умолчанию для соответствия рекомендациям Vite/TS (#22468).

Кроме того, теперь вы должны получить доступ к подсказками типов к лейаутам в setPageLayout, а также в <NuxtLayout name> (#22363).

🦄 Поддержка асинхронного контекста

Если у вас когда-либо возникала проблема с 'Nuxt context unavailable', то это может вам помочь. Теперь мы поддерживаем собственный асинхронный контекст для Bun и Node под экспериментальным флагом, как в Nuxt, так и в Nitro (#20918).

Это позволяет использовать Nuxt композаблы на сервере без необходимости обеспечивать их прямой вызов в setup-функции. Это также позволяет делать то же самое в Nitro с новой утилитой useEvent(), которую можно использовать в маршрутах сервера.

Чтобы попробовать, вы можете включить experimental.asyncContext:

export default defineNuxtConfig({
  experimental: {
    asyncContext: true
  }
})

👓 Обновление наблюдателей

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

⚗️ Nitro 2.6

В Nitro 2.6 появилось еще множество интересных функций, в том числе более компактные и легкие серверы, а также новое постоянное хранилище данных в директории .data.

👉 Подробнее читайте в полной статье о релизе.

✅ Обновление

Как обычно, мы рекомендуем выполнить обновление следующим образом:

npx nuxi upgrade --force

Это также обновит ваш lockfile и обеспечит получение обновлений из других зависимостей, на которые опирается Nuxt, особенно в экосистеме unjs.

📃 Полный список изменений

Читайте полное описание релиза https://github.com/nuxt/nuxt/releases/tag/v3.7.0

← Вернуться к блогу