Он еще не вышел, но вам лучше быть готовым, потому что это серьезное обновление!
После стабильного выпуска Vue 3 в конце прошлого года и миграции всех сторонних инструментов и библиотек, мы видим, что все больше и больше библиотек и инструментов с открытым исходным кодом переходят с Vue 2 на Vue 3.
Вот почему самое популярное фреймворк Vue как раз пора совершить скачок. Естественно, я говорю о Nuxt.js, который официально войдет в публичную бета-версию через несколько дней после публикации этого сообщения.
Итак, давайте поговорим о том, чего вы можете ожидать от Nuxt 3, какие улучшения он принесет и стоит ли вам переходить на него!
Текущий статус Nuxt 3
Прежде чем мы углубимся в особенности, давайте кратко рассмотрим текущий статус Nuxt 3.
После многих задержек кажется, что мы наконец-то увидим Nuxt 3 во всей красе 12 октября 2021 года. Насколько верна эта дата, учитывая предыдущие задержки? Что ж, с официальным объявлением на Nuxt Nation и специальной целевой страницей с обратным отсчетом - это, несомненно, более убедительно, чем когда-либо.
Помимо даты, есть и другие подробности, подтверждающие предстоящую дату релиза. Nuxt 3 сейчас находится в частной бета-версии, доступ к которой предоставлен основной команде разработчиков Vue и близким партнерам.
Также стоит упомянуть новый фирменный стиль Nuxt и редизайн сайта. Хотя он сейчас доступен и включает документацию Nuxt 2, это, безусловно, знак грядущей версии v3. Кроме того, сам веб-сайт построен с использованием Docus - Платформа веб-приложений на основе документов, которая будет основана на Nuxt 3 и имеет открытый исходный код.
Новые возможности
Когда дата выпуска Nuxt 3 не назначена - давайте поговорим о хорошем! Конечно, я имею в виду все новые функции и улучшения, которые появятся в Nuxt 3.
Теперь, когда есть одна целевая страница, несколько обсуждений и разговоров - о Nuxt 3 не так много подробностей. Тем не менее, мы постараемся собрать воедино полезную информацию, чтобы у вас было общее представление о том, чего ожидать.
Общие оптимизации
Nuxt 3 содержит множество общих оптимизаций и улучшений. Результат - меньший размер пакета (на 20% легче ядро по сравнению с Nuxt 2) и улучшенная производительность.
Разработчики могут рассчитывать на лучшую производительность в процессе разработки благодаря новому движку сервера Nitro с оптимизированным холодным запуском и динамическим разделением кода.
Кроме того, были обновлены и другие части инструментов - теперь есть Webpack 5, PostCSS 8, ESBuild и Vite. поддержка - чрезвычайно быстрое создание как разработки, так и производства.
Vue 3
Ни для кого не удивительно, что Nuxt 3 будет основан на Vue 3 и обеспечит взаимодействие с последней версией фреймворка Vue. Это означает:
- Новые модульные утилиты для Composition API;
- Улучшенная маршрутизация с помощью Vue Router 4;
- Исправлена загрузка данных и интеграция с приостановкой.
Машинопись
Помимо миграции на Vue 3, Nuxt 3 использует модули ES (ESM) и TypeScript как первоклассные средства для улучшения процесса разработки. Этот шаг соответствует тому, что сделал Vue 3 и куда сейчас движется вся экосистема Vue.
Тесная интеграция с TypeScript обеспечит проверку типов для всей кодовой базы Nuxt 3, а также улучшит автозаполнение и обнаружение ошибок.
Если вам не нравится TypeScript, вы все равно сможете использовать Nuxt без каких-либо проблем.
Лучший опыт разработки
Помимо TypeScript, Vue 3 и улучшений производительности, Nuxt 3 предлагает еще больше улучшений в процессе разработки, в том числе:
- Новый Nuxt CLI для простой сборки проектов и интеграции модулей;
- Nuxt Devtools для более быстрой и удобной отладки прямо в браузере;
- Набор современных служебных модулей под названием Nuxt Kit;
- Автоимпорт для глобальных утилит и составных функций.
Гибридный рендеринг
И последнее, но не менее важное: Nuxt 3 представляет гибридную визуализацию или так называемую «инкрементную статическую генерацию». Эта функция, в широком смысле, позволит вам решить, как долго вы хотите, чтобы ваши страницы отображались статически или динамически. Более подробная информация об этой функции будет опубликована вместе с бета-версией.
Нитро двигатель
Теперь одна из главных особенностей Nuxt 3 - это новый серверный движок - Nitro. Этот движок является причиной многих улучшений производительности и новых функций Nuxt 3.
Маршруты API
Благодаря Nitro вы теперь сможете легко создавать и запускать код серверного API, как это сейчас возможно во многих других полнофункциональных фреймворках. Новый каталог server/api/ будет местом для вашего серверного API, а функции найдут свой дом в server/functions/.
Новые маршруты API в сочетании с новым механизмом изоморфной выборки и улучшенной бессерверной поддержкой знаменуют собой шаг в правильном направлении.
Оптимизированный вывод
Еще одним преимуществом Nitro является его высоко оптимизированный универсальный вывод в новый каталог .output. Пакет главного сервера теперь будет меньше 1 МБ, и производительность будет заметно увеличиваться. Например, холодный пуск будет в 75-100 раз быстрее! Это окажется очень полезным для таких сред, как Cloudflare Workers.
Эти улучшения будут достигнуты за счет лучшего отслеживания зависимостей с помощью трассировки файла узла от Vercel (@ vercel / nft). Это гарантирует, что в окончательный пакет будут включены только необходимые зависимости.
Дальнейшее уменьшение размера пакета будет достигнуто с помощью пересмотренного механизма разделения кода.
Кросс-платформенная поддержка
Благодаря быстрому развитию JavaScript за последние несколько лет появилось несколько платформ на базе JS - и Nuxt 3 готов для всех них.
Благодаря ранее упомянутому улучшенному отслеживанию зависимостей и новым легким полифилам в сочетании с автоматическим определением платформы Nuxt 3 будет без проблем работать практически во всех средах JS. Сюда входят Node.js, Deno, Cloudflare Workers и даже Service Workers браузера (хотя сейчас это экспериментальная ).
Nuxt Bridge
Хотя Nuxt 3 выглядит отличным обновлением, есть большая проблема, которую мы не обсуждали - совместимость. Сам Vue 3 с его критическими изменениями уже сделал многие библиотеки и инструменты из экосистемы Vue 2 «устаревшими» и нуждающимися в обновлении. Итак, насколько сложно будет перейти на Nuxt 3? Благодаря Nuxt Bridge - не так уж и сложно!
Nuxt Bridge - это проект, направленный на привнесение функций Nuxt 3 в Nuxt 2. Он призван упростить миграцию в будущем, а также предоставить множество улучшений Nuxt 3 для пользователей Nuxt 2, которые не планируют выполнять обновление немедленно.
Планируемый набор портированных функций включает:
- Нитро двигатель;
- ESM и встроенная поддержка TypeScript;
- Composition API с компонентами Nuxt 3 и автоматическим импортом;
- Nuxt CLI и Devtools;
- Интеграция Vite.
Nuxt Bridge также упрощает обновление всей экосистемы Nuxt. Устаревшие плагины и модули будут продолжать работать, файл конфигурации Nuxt 2 будет совместим с Nuxt 3, а некоторые API Nuxt 3 останутся неизменными, чтобы обеспечить постепенное обновление.
Нижняя линия
В целом, я лично не могу дождаться Nuxt 3. Как и многие другие разработчики Vue, я искал его последние несколько месяцев, и я очень рад, что он наконец станет доступен публике.
Хотя улучшения производительности впечатляют, меня как пользователя TypeScript больше всего интересует переписывание TS, а также интеграция Vue 3 и Vite. Недавно они стали моими популярными технологиями для личных проектов, и было бы здорово, если бы они были интегрированы в единую структуру.
Nuxt 3 станет ступенькой в миграции экосистемы Vue на Vue 3, побуждая других разработчиков обновлять или создавать новые инструменты для обогащения новой экосистемы. Сообщество, несомненно, выиграет от перехода на TypeScript, принятия Composition API и улучшения производительности как пользовательских приложений, так и самой среды разработки благодаря Vite.
Итак, вот оно! Это многие, но, конечно же, не все функции, которые вы должны ожидать от Nuxt 3. В зависимости от того, когда вы его читаете, я надеюсь, что вы так же хотите испытать Nuxt 3, как и я, или, может быть, вы уже играете с Это. В любом случае - получайте удовольствие!
