Невероятный Vite под микроскопом

О Vite не написал статью уже только ленивый. Все рассказывают, что это новая серебряная пуля для запуска приложений. Постоянно мелькают лозунги "create-react-app больше не нужен!". Так ли это на самом деле и действительно ли Vite настолько хорош, как о нем говорят мы и попробуем разобраться в новом видео

Поддержать Айти Синяка можно здесь:

00:00 Анонс темы
00:38 Что такое Vite
02:15 Как работает Vite
02:49 Что такое esbuild
03:28 ES Modules
05:19 Нюансы использования Vite
06:20 Промежуточные итоги
06:58 Мигрируем на Vite
11:00 Запускаем проект
13:20 Итоги
14:32 Подписывайтесь!


-------------------------

Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

[vovergg]

В видео в самом начале показан кусок документации, в котором написано, что слово Vite французское и его следует произносить как "вит".))

[VirusTryan]

На первой же минуте указано в доке, что произносить надо "вит" ))))

[hlpkey]

В январе переводил свой проект на vite, 1в1 все этапы и баги словил. Я получил сплошной кайф от перехода и решения этих трудностей, но мне и отчитываться только перед самим собой. В целом потратил сутки на решение, от идеи до финального коммита. Спасибо за видео и труд!

[fallout]

У меня сейчас во вкладках открыто 10+ видосов от синяка, пересматриваю по 2 и 3 кругу) Готовлюсь к собесам) Спасибо тебе огромное, за невероятно полезный контент!

[vovergg]

Видео класс!) Судя по увиденному, я для себя понял, что старые громоздкие проекты на Vite переводить будет проблематично и не стоит, а начинать новые как раз нужно. Судя по видео у Vite преимуществ на порядок больше, чем недостатков.

[olegsbk]

Было бы интересно еще видео про SWC посмотреть от тебя. Спасибо за видео!

[JackPts]

У меня был проект на вите+реакт, всё работало как пушка. Но потом надо было сделать из него микросервис, и вот тут пришлось от него отказаться. Делал всё по нагугленным статьям и избавлялся от ошибок, но по итогу вит так и не возвращал файлы на expose. Пришлось переделывать всё на тормознутый webpack federation module. Только так всё завелось без проблем.

[profesor]

В целом, js код не должен зависеть от бандлера, тогда и проблем с его переносом между проектами не будет. Если ts, то все для его работы и сборки описано в tsconfig, и бандлер должен его понимать. В vite и webpack (cra) за это отвечает специальный плагин.

Переменной `process` нечего делать в браузере. Но если вдруг понатыкали везде где надо и не надо, то решается это примитивно, либо через плагин (аналогично в webpack, cra), либо вручную ее объявить в `window.process = import.meta`. Лично я такой фигней не страдаю, потому что в браузере есть только одно окружение, это сам браузер. А обработка окружения, это задача всего того кода, который крутится на сервере.

[TheLevius]

Vite - современный инструмент. И тот факт, что он не использует nodejs костыли (commonJS модули), а завязывается на инструменты языка (ESM) говорит о том, что он все правильно делает.
11:40 - "import.meta.env" - удивлен, что у человека с такой глубокой экспертизой в React, этот момент вызвал удивление )))

[Moltenship]

У вас весьма специфичный кейс, для ~80% проектов vite является лучшей альтернативой. Dan Abramov в обсуждении CRA сказал, что Vite сейчас является лучшим вариантом чем CRA.

[evisotskiydev]

круто что можно посмотреть как кто-то другой набивает себе шишки, и не делать этого самому ) Спасибо за работу!

[виртуоз_ру]

Во первых не вайт, а вит.
Vite это классная вещь. Как и всё, что делает Эван Ю.
Пользуюсь им уже больше года.

[baileysli]

Переводил небольшой проект с Вебпака на Вит. Тоже были проблемы с process и SVGR, но результатом остался доволен.
+ легаси бандл одним плагином, удобно
+ из коробки сразу CSS модули настроены.

Для старых больших и громоздких проектов переходить не советовал. Но для небольших или новых на чистом Реакте это отличный вариант. А про CRA много критики в open source сообществе

[anatolysokolov]

не вайт, а вит :)
там еще забавная плюшка есть - каждый текст в jsx должен быть в своем тэге. Типа нельзя

[allusio]

Было бы интересно про module-federation и об MFE в целом

[hpcgpxc]

0:40 - "документация нам говорит говорит следующее ..." полностью пропускает 5 слов о том, как произносить слово "... вайт - это инструмент ... "

[XCanG]

У нас таких проблем с миграцией не было, а начать новый проект сразу на Vite довольно не сложно. Думаю как минимум старые проекты можно не трогать, а вот в новых сразу начать работу с ним.
Странно что на твоём проекте с кучей файлов (точное количество я так и не понял) там всего 9 секунд. У нас на крупном проекте 65 секунд шла дев сборка и hot reload был не менее 5 секунд, с Vite первичная сборка уменьшилась до 3 секунд, последовательные 0.5-1.5 секунды, а hot reload настолько быстрый что трудно сказать сколько там занимает времени.

[kotov]

Вит для прода использую уже год, миграция с CRA действительно больная если проект большой с очень дорогим рефакторингом. Но хоронить технологию которую используют в проде уже (по меркам развития веба) давно, чисто из-за того что у тебя не вышло мигрировать один проект - легкомысленное решение

[farkhad-rh]

Отличное видео, спасибо! Конечно, я не имел опыта проведения миграций, но я впервые использовал Vite на новом проекте год назад и до сих пор все работает отлично. Недавно я использовал его на еще одном новом проекте и заметил значительные изменения, которые свидетельствуют о его продвижении и развитии. Я уверен, что в будущем Vite станет еще лучше и удобнее в использовании)

[avatareg]

Вит, но не Вайт

На первой минуте скрин документации Overview инструмента, где написано, что Vite - это французское слово "быстро" и произносится оно "veet" (т.е. вит)