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

[@vovergg]

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

[@ansaganie]

[@virtual5754]

Французы свой собственный язык произносят на уровне четырехлетних детей. Так стоит ли уподобляться им?

[@tumann]

@@virtual5754 жесть откуда такая ненависть к нации?

[@virtual5754]

@@tumann с нацией все ок, претензии к нормам произношения их языка (и написания тоже, но это другая тема).

[@lomeat]

Это как Vue, который все зовут Вью. Просто не все привыкли еще) А вообще нечего называть свой продукт так, что его сложно произнести

[@VirusTr0yan]

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

[@paemox]

Не хватало еще и учить французкий, так что будет Вайт!

[@it-sin9k]

Вот блин опростоволосился)

[@mvttofficial]

Вайт, типо белый?

[@AbraKadabra000]

@@mvttofficial Белый на французском blanc

[@advhunter2]

Да, очень по ушам резало

[@h3lpkey]

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

[@АлександрПанин-ю2в]

А алиасы работают? У меня почему-то пошет ошибу, но все рав в инструкции

[@fallout407]

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

[@it-sin9k]

Удачи на собеседованиии!

[@mrundersson]

желаем успехов)

[@fallout407]

@@it-sin9k 🙏

[@DenisB-d5f]

Соболезную За три месяца меньше дюжины собесов на сеньор-фронта На последнем спросили "зачем придумали БЭМ", "что такое box-model" и еще полчаса вопросов по CSS, два вопроса по JS (ну с ними-то я справился), ноль вопросов по библиотекам - сказали, что я плаваю в вопросах. Вакансия была, если что, не на джуна и не на верстальщика, а именно на сеньор-инженера. На другом собесе дали задание: есть функция конструктор и класс, от них два экземпляра и 20 строк кода, в каждой из которых меняются, добавляются, перекрещиваются, удаляются свойства экземпляров, прототипов и т.д. и на каждой надо сказать устно результат - поплыл уже на 10 строке, запутавшись какие там были до этого операции. Сказали, что я не знаю прототипов и до следующего собеса не допустили (хотя по предыдущим вопросам удивлялись глубоким знаниям). Из всех собесов был только один нормальный, но там я выше головы прыгнул и ясен пень завалился, но было интересно у Evil Martians пособеседоваться. Это пздц, товарищи.

[@fallout407]

@@DenisB-d5f оу, это дичь. Имхо, прототипы на клиенте не нужны, меня ни разу классами не грузили. Даже про this все один раз спросили за 10+ собесов. Вам просто везет на персонажей, которые самоутвердиться хотят за ваш счет. Лучше бы про производительность приложений спрашивали. Я в такие компании даже если позовут не пойду, в тот же Яндекс принципиально не собеседуюсь, тк они не понимают кого ищут, сначала за алгоритмы, простите - е*ут и в хвост и в гриву, а на работе в итоге: display: flex; и padding: 10px; Удачи вам в поисках!

[@olegsbk3562]

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

[@profesor08]

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

[@it-sin9k]

npm пакеты не требуют у вас такие переменные?

[@profesor08]

@@it-sin9k нет, эти переменные нужны пакетам, и это пакеты должны заботиться о том, чтоб все, что им надо, у них было. Ведь у них свой проект, свой бандлер, который все собирает и делает релиз. Некоторые делают билды под разные типы модулей, и возможно, если пакету что-то надо, то это намек на то, что пакет неправильно используется. Обычно это все автоматически разруливается, но может какой-то исключительный случай.

[@vovergg]

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

[@fallout407]

Да, новый проект завелся на реакте без сучка и задоринки)

[@profesor08]

Стоит, даже если наговнякано конкретно, то будет повод прибраться.

[@JackPts]

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

[@it-sin9k]

Спасибо, что поделились горьким опытом)

[@anatolysokolov]

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

[@Илья-ж2г5ш]

+ даже в видосе показан скрин доки, в которой написано как правильно читается, мб я душнила, но бесит жоска

[@anatolysokolov]

@@Илья-ж2г5ш ну значит я тоже душнила, все норм ;)

[@lionstar3189]

На анг.яз будет вайт, а вит это с франсуа. Душнилы вы капец

[@anatolysokolov]

@@lionstar3189 надо уважать разработчика, раз уж он явно написал как надо читать наименование

[@anatolysokolov]

@@lionstar3189 ща пробежался по нескольким видосам от англоязычных ютуберов - у всех вит

[@allusio]

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

[@dididie158]

согласен

[@ansaganie]

СОГЛАСЕН 100х

[@bebeto123g]

На проекте пришлось разобраться с MF. "Просто добавляешь по сути плагин, читаешь документацию, настраиваешь свое приложение, имимтируешь хост приложение, и вуаля - ты красавчик" - сделал я на домашнем компе под линуксом и последними версиями node и webpack. А вот на рабочем проекте под виндой пришлось обновлять ноду с 14 до 16 (и то пришлось сопроводительное письмо в СБ с пояснением ЗАЧЕМ, и это в 2022г)), webpoack с 4 на 5 версию обновлять, сами понимаете какие проблемы вызывает, в общем всего неделька страданий и поиска новой работы грузчиком в пятерочке...Как hot-reload сделать внутри родительского приложения при изменении в дочернем - так и не разобрался, потому разрабатываю без режима MF, я слишком для этого дерьма.

[@allusio]

@@bebeto123g это путь воина

[@manushov_rodion973]

Не надо лезть в этот ад - там куча ньансов, которые усложняют разработку, поддержку и тестирование многократно!) Установкой ModuleFederation, не ограничитесь)

[@evisotskiydev]

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

[@it-sin9k]

Такая идея и была у данного видео, сэкономить время для нескольких тысяч людей)

[@DenisB-d5f]

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

[@avatar4eg]

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

[@XCanG]

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

[@it-sin9k]

Ого крутые показатели) не слышал чтобы проект запускался 65 секунд никогда) огромный же у вас проект)

[@lLoseControll]

У меня тоже около минуты запускается, хотя у меня бандл на 600кб,учкбныц проект, правда и проц i7 2 поколения) на ryzen 5 3600 секунд 30, если бы запускался 9 сек, я бы был бы доволен)))

[@it-sin9k]

@@lLoseControll Ребята у меня мак бук последний) сорян)

[@XCanG]

@@it-sin9k да кстати, отчасти влияет то, что это на типичном офисном ПК. В домашнем условии на мощном ПК оно конечно было бы побыстрее. Тем не менее именно на рабочей машине и нужно эти оптимизации.

[@baileysli6235]

Переводил небольшой проект с Вебпака на Вит. Тоже были проблемы с process и SVGR, но результатом остался доволен. + легаси бандл одним плагином, удобно + из коробки сразу CSS модули настроены. Для старых больших и громоздких проектов переходить не советовал. Но для небольших или новых на чистом Реакте это отличный вариант. А про CRA много критики в open source сообществе

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

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

[@__kawaii]

Во-первых: не "во первых", а "во-первых". Во-вторых: если закидываешь людям понт, будь готов соответствовать.

[@TheLevius]

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

[@АлександрКалинин-ъ6й]

Недавно начал новый проект на Vite. Потратил пару дней на то, чтобы разобраться, как что работает и настройку всех вспомогательных инструментов, оптимизаторов картинок, проброс переменных окружения и тд. По итогу очень доволен, не решённых проблем не осталось, а скорость и правда молниеносная.

[@kotov9281]

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

[@it-sin9k]

Чего сразу хоронить) просто не рекомендую по первым ощущениям) Буду и дальше наблюдать как развивается экосистема)

[@profesor08]

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

[@MegaBeshka]

дев сборка использует esbuild написанный на golang, а продакшн через rollup. не может ли из-за этого измениться поведение кода при определенных условиях? по сути 2 разных компилятора, и 2 разные сборки

[@profesor08]

@@MegaBeshka это так и происходит

[@MegaBeshka]

@@profesor08 под поведением кода я имел ввиду ошибки

[@kimanowka]

С rrd 6.4 закончил?)

[@it-sin9k]

в планах есть еще видео, но хочется разбавлять темы. Судя по статистике тема не настолько востребована

[@cyber-doge]

Я проблему с process решил таким кодом: export default defineConfig({ define: { "process.env": {}, })) ты такой пробовал и почему не помогло?

[@it-sin9k]

да, это первое что я попробовал. У меня просто ничего не изменилось. Мб какой то пакет более специфичный в под зависимостях используется.

[@RamaRama-qv3jo]

В итоге на чем, на текущий момент лучше делать сборку для проекта на React Redux?

[@it-sin9k]

А вот как раз записал про это следующее видео))) буквально на днях выйдет))

[@RamaRama-qv3jo]

@@it-sin9k С нетерпением жду!

[@alexanderkomanov4151]

Thanks, IT-Sinyak!

[@KirillSmetanin]

В январе перевел основной проект компании на vite, проблема с абсолютными путями решается плагином, удобный конфиг с настройкой прокси, сейчас еще плагин module federation допилят до ума (на последней версии проблемы, если либа одновременно использует именованные и дефолтный импорты) и будет сказка.

[@naruwa-world]

"На сколько можно доверять этим метрикам вообще непонятно. Это лишь какой-то скриншот" Там снизу есть "More info here", где можно узнать о том, как проводился данный бенчмарк...

[@farkhad-rh]

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

[@it-sin9k]

Круто! Спасибо за комментарий!

[@kotifnat]

Настраивал ли прокси сервер? Если да то, подскажи пожалуйста, есть ли возможность проксировать все пути на бэк без префиксов типо /api, то есть если я хочу сделать запрос на /test/1 чтоб он на бэк проксировал?

[@Dima_Elagin]

Есть на логрокет статья: "webpack or esbuild: Why not both?" (легко гуглится, не могу оставить ссылку).Там предлагают для вебпака использовать не babel-loader a esbuild-loader, тот самый esbuild что обеспечивает быструю сборку в vite. Кто нибудь пробовал? пока руки не доходили на рабочем проекте конфиг под него переписать

[@it-sin9k]

Прикольно :) Звучит как исследование интересное) надо попробовать)

[@Илья-с1л6э]

vite работает быстро в dev режиме за счет того что не собирает бандл как это делает вебпак. Дело не только в esbuild

[@it-sin9k]

@@Илья-с1л6э да, в видео есть целый блок про ES Modules. Где даже блок схемы разбираются, как это работает :)

[@amelianceskymusic]

1. CRA не позиционируется как что-то для прода, иам Абрамов что-то недавно писал по этому поводу 2. На слабом ноуте запуск КРА пару минут а хот релоад пару секунд, это мегадолго, когда вит/вайт запускается 10 секунд, а хотрелоад "моментальный"

[@stivandsoft]

У меня на проекте где 20 метров исходников, они их все разом грузит и при первой загрузке это очень долго. Ещё бывают случае, при hot reload дом дерево ломается

[@triumphant5912]

Мне доверили развернуть проект, я сделал на vite хотя друг не советовал, мол может быть не надежно, по функционалу вроде расширять его не придется, хочу совет, если первый лучше уж на CRA?

[@it-sin9k]

Я думаю это нужно согласовать с командой. CRA будет более стабильным, а Vite более новым модным и дерзки, но менее стабильным. Как я вижу комментарии делятся на две группы. Я живу уже год и все ок, проблем не было. И год живу, но прошел некоторые трудности неприятные. Почитайте комментарии и примите решение :)

[@triumphant5912]

@@it-sin9k Спасибо за ответ, я принял решение, что модность и дерзость для меня не позволительная роскошь, на данном этапе)) и поэтому перенесу на CRA

[@kotekotekotekote-pn5hk]

Как говорится, смотрю в книгу, вижу фигу :)

[@ufckngsht]

Так как сборка как бы в браузере теперь надо переменные ноды перекидывать в браузер. Тот же "process" можно решить очень просто: plugins: [vue()], define: { "process.env": process.env, }, Я перешел на vite и время сборки уменьшилось с 10 минут на 2 минуты c билдом докера. Насчет количества пакетов не соглашусь: убрал webpack - поставил vite, убрал babel-loader, vue-loader - поставил @vitejs/plugin-vue.

[@it-sin9k]

Пробовал это "process.env": process.env,. У меня не завелось :( специально проект оставил в ожидании комментариев. Возможно у нас какой-то npm пакет специфичный используется в под зависимостях. По поводу количества пакетов имелось ввиду не прямых зависимостей, а под зависимостей. Если посмотреть зависимости Vite, то он требует установить как мминимум esbuils и rollup. А те в свою очередь устанавливают еще больше зависимостей

[@microlabig4938]

@@it-sin9k тоже не заводилось, решил следующим способом: const { loadEnv } = require('vite'); module.exports = defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), 'REACT_APP_'); return { define: { 'process.env': env, }, //... } });

[@alexlmaxl4966]

Спасибо за видео! Вопрос, может немного не по теме: Hot reload - на CRA толком не работает, если есть в проекте redux или подобный либы. Это у меня какая-то локальная проблема с Hot reload или его как-то по хитрому настроить нужно? И как с Hot reload на vite(то же летает)?

[@alexandrkositsky7698]

Хот релоад на вит реально летает, это типа его самая сильная сторона. Хотя честно меня даже обычный лайврелоад устраивал, подождать 1с не проблема.

[@Илья-с1л6э]

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

[@Сергей-й9т7ъ]

Спасибо за видео. Удивило что вы используете react-scripts, а не кастомный webpack config для своего проекта. На сколько я слышал и в какой-то момент это было в документации к CRA, что он не рекомендуется для продакшн сборки.

[@it-sin9k]

Как то так исторически сложилось и всех вроде по сей день это устраивает)

[@КлиментийКараваев-у8з]

Таки в чем проблема использовать вебпак с esbuild в dev моде?)

[@Илья-с1л6э]

можно, но это не даст такого прироста. Скорость vite в деве идет за счет того что он не собирает бандл. Он просто отдает все файлы в браузер как esm модули. Ну и конечно транспилит тот же jsx только по мере того как файл понадобиться.

[@YuriyParaska]

Очень крутое и доступное объяснение, спасибо большое!)

[@it-sin9k]

мы очень старались)

[@kch9241]

Перешли недавно на Vite, но проект свежий и проблем почти не возникло. Скорость запуска мое почтение) Нужна была еще возможность запуска на моковых данных на non prod окружении (получается возможность запуска в development локально в двух режимах: моковый либо с проксей на реальное окружение, и запуск как production также в двух режимах: на моках либо на env) , и с помощью Vite mode решилось всё просто + Miragejs.

[@pashadotcenko7391]

спасибо. очень информативно.

[@ZHLbrite]

Спасибо! Вроде правильно произносить ВИТ, если верить документации)

[@TheTexPro]

Огромное спасибо за видео!

[@eugeniyvinnikov5480]

Видео супер, давно хотел попробовать Vite и посмотреть что это такое. Спасибо большое за контент !

[@vpetevotov]

А для чего public URL нужно было прокидывать в HTML файлы? HtmlWebpackPlugin же делал все, что нужно

[@dididie158]

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

[@Shad0w5m00h]

Перешёл на vite и даже мигрировал на него средних размеров проект на cra) проект мигрировал вынужденно, так как он несуразно долго стартовал и собирался. С vite время старта очень сильно выросло, время Билда не так сильно, но раза в полтора наверное. Что не очень здорово: 1) нужно дописывать конфиг для более короткого разрешения путей, тут пришлось поискать 2) по умолчанию вит собирает все файлы просто в одну папку кашей из файлов, нужно дописать в конфиг, чтобы по папкам раскладывалось 3) нужно доставлять плагинов для каких-то вещей спецвещей. Пришлось поэкспериментировать с допфичами. Но, к счастью, на это было определенное время

[@serhioramires3166]

Возможно у Вас некорректный кофиги поэтому долгий старт.

[@Shad0w5m00h]

@@serhioramires3166 некорректный конфиг cra? Долгий старт был у cra

[@rubgud9903]

Спасибо Синяк! Знаю тебя со времен Itechart. Супер толковый мужик!

[@it-sin9k]

Спасибо!) Были времена хорошие)

[@arslan5919]

Почему ещё до получения багов не подумал о том что микрофронт нужно будет переносить, и это нельзя будет. Сэкономили бы много времени.)

[@DreamingDolphing]

Нового react create app больше не будет, его убрали даже из официальной документации. Webpack развиваться тоже не будет, потому что происходит переход на Turbopack, активно развиваются другие не js средства для сборки (например rspack).

[@it-sin9k]

Любопытная информация. Ну ждем официального заявления куда переходить по рекомендации в React документации. Пока не очень понятно. В Webpack пока комиты на ежедневной основе есть, но кто знает, что они там подпиливают. Значит нас ждут большие перемены, очень интригующе)

[@DenisK0s]

Можешь пожалуйста в каком-то из будующих видео раскрыть тему минусов useSelect (а именно stale props and "zombie children") по сравнению с mapStateToProps потому что у нас на работе холивар по поводу того чтобы избавиться от mapStateToProps но никто не может адекватно обьяснить какие проблемы мы решим перейдя на useSelect учитывая упомянутые выше скрытые баги. Заранее спасибо!

[@it-sin9k]

хмм, да на самом деле никакие серьезные проблемы вы не решите переходя с mapStateToProps на useSelect. У useSelect есть всего 2 преимущества на мой взгляд: - useSelect - это hook, а mapStateToProps подключается через HOK. Соответственно если используешь hook, то у тебя виртуальное дерево меньше, что потенциально должно, уменьшить количество работы. Но не думаю, что вы это почувствуете - без useSelect тяжело делать самостоятельные пере используемые хуки. Например у вас может быть хук useTotalPrice. Он будет использоваться в 5 местах. Внутри него можно достать и redux значение с помощью useSelect. В итоге хук будет полностью самостоятельным. С другой стороны с mapStateToProps придется вам во всех 5 местах доставать это значение и пробрасывать его в хук useTotalPrice. Хорошо, если значение одно, а если их много (amount, currency, discuount and e.c.). Тогда пробрасывать во всех 5 местах неудобно. А через пол года, вам понадобится еще 1 свойство и вы опыть будете пробрасывать во всех 5 местах его и надеяться, что нигде не забыли Как то так

[@kotifnat]

Хорошее видео, спасибо большое. У меня еще во время настройки Vite возникли проблемы с настройкой proxy сервера (не додумался как настроить так чтоб сервер проксировал все запросы на бэкенд без префиксов типо /api и т.д.). Если кто знает как сделать, подскажите, пожалуйста

[@2009Spread]

тоже пробовал проект перенести на вайт... пару дней фиксил ошибки уже все работало но в консоли еще много красноты оставалось, но пришлось вернуться к вебпаку

[@it-sin9k]

Знакомая ситуация :)

[@mzn6689]

Согласен, не имеет большого смысла переводить проект ради пары секунд старта дев сервера. Особенно не рекомендую использовать Vite под электрон, там отдельная пачка багов и часы поисков решений.

[@pvpshoot]

Я для алиасов использовал все директории внутри папки src которые вычислялись прям в конфиге, не пришлось пути переписывать

[@it-sin9k]

Умно)

[@devmoek]

Видео полезное, спасибо большое. Но почему Вайт? Когда Вит..

[@PavelLitkinBorisovich]

в вебпаке 5 тоже process нету и buffer и еще штук 10 всяких таких вещей было дропнуто

[@it-sin9k]

Хмм, тогда интересно как работает у нас на проекте с вебпаком 5 о_О

[@aleksprimetv]

У нас на работе есть 2 проекта 1 на вебпаке, дрогой на vite, как то раз коллега из проекта с vite говорит, а почему у вас не работает хотрелоад, только потом он понял что она занимает секунд 5 и больше))) так что сразу 1 плюс очевиден в сторону vite!

[@boldureans]

Спасибо за видео!

[@ЕвгенийСниховский-ь8ь]

От себя добавлю, что для юнит тестов также рекомендуют переходить на vitest. Обратная совместимость есть. В целом, vitest мне понравился больше. Мы сейчас среднего размера приложение кардинально мигрирует с cra + react 16 + redux saga на vite + reac 18 + react context. При этом у нас часть логики в самописных переиспользуемвх модулях (авторизация, биллинг), плюс хитрые скрипты для интернационализации. Мигрирует === пишем с нуля с хитрым nginx, который мигрированные страницы отдает от react 18 а легаси от react 16. Пока очень довольны. Дев сервер не такой быстрый, как его рекламируют, но существенно быстрее старого. Без redux saga код стал изолированным и более понятным, фичи пишутся намного быстрее

[@it-sin9k]

Круто! Спасибо что поделились своей историей)

[@YuryGoltsman]

Я прошёл чуть дальше и решил все проблемы с project.env и другие проблемы vite. Но это было только начало. Он генерирует es-module для каждого пакета зависимостей и эти модули кишат проблемами. На часть из них жалуется сам Вит (сам придумал, сам обиделся :), а остальные валятся в браузере. С новой аппликацией проще, но многие проблемы зависимостей все еще остаются. Мне не понравилось, не смотря на все плюсы. Слишком сыро и нет авто миграции с одного из самых распространенных билдеров - CRA

[@it-sin9k]

Очень похожие ощущения словил)

[@chaberch]

На 0:41 можно посмотреть как произносится название Vite

[@messenja2547]

Только не ВАЙТ, а ВИТ, ну е мае. Ведь даже в овервью написано (pronounced /vit/, like "veet")

[@deanwichester6412]

билдимся это от слова билд (сборка)?

[@it-sin9k]

да) все верно)

[@greydragon888]

Так и оставался бы на CRA, если бы он не умер (413 pr и отсутствие обновлений больше года - явный признак смерти проекта) Новый проект начал на vite + vitest. Полет пока нормальный

[@it-sin9k]

Ого, не знал. Только глянул и действительно год тишины у них О_о

[@greydragon888]

@@it-sin9k Больше. Пятую версию зарелизили 14 декабря 2021. В апреле 22 добавили мелкие баг-фиксы.

[@script1851]

3:45 забыл добавить ссылку

[@it-sin9k]

Исправился! Спасибо developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

[@АртемТерещенко-ц4э]

Спасибо большое за этот разбор

[@sierafa1nt]

Лично у меня абсолютные пути отлично завелись и ничего не пришлось менять.

[@mr-pony]

это каким чудом у тебя большой проект на CRA Запускается за 9 секунд? У меня до минуты иногда уходит на около-топовом железе.

[@it-sin9k]

у меня макбук прошка на м1 процессоре, я уже начал думать, что дело в нем)

[@Илья-с1л6э]

@@it-sin9k собирай проект на чем то послабее, и тогда сможешь оправдать для бизнеса переход на vite =)

[@it-sin9k]

@@Илья-с1л6э боюсь, что бизнес за такие трюки мне оторвет что-нибудь)

[@nefertisu6818]

Когда уже будут видео про тришейкинги и что их ломает((

[@it-sin9k]

прикольная тема) не думал о ней даже) надо будет поковырять)

[@ArtikMan1994]

У нас огромному SPA проекту подключили esbuild-loader к вебпаку и сборка стала быстрее где-то в 7 раз

[@it-sin9k]

о круто) а у вас TS на проекте? вы отдельно loader для него подключали?

[@ArtikMan1994]

@@it-sin9k Ку) Нет, у нас на проекте TS нету. В ближайшее время планируем переходить. До этого был старый добрый babel-loader

[@it-sin9k]

@@ArtikMan1994 Надо будет попробовать с нашим ts-loader как это взлетит)

[@greydragon888]

Кстати, я не знаю, почему, но у меня нет проблемы с process.env.NODE_ENV. Он отлично выводит (по крайней мере "development") его значение в рантайме

[@mulfyx]

а теперь вспомни сколько модулей ты раньше накатывал для того же вебпака или посмотри зависимости у реакт скриптс и подумай насчёт этого "минуса"

[@kirillunlimited]

01:26 Rollout? Может быть Rollup?

[@Ernuna]

прошел год, vite ~12 млн скачиваний, хотелось бы узнать мнение автора на этот счет с учетом vitest

[@it-sin9k]

к сожалению я не работал еще с vite на реальных проектах и не могу оценить насколько он хорош) но очевидно, что vite теснит всех в SPA)

[@AibekSadraliev]

привет! Долгожданное видео, спасибо за проделанную работу. Есть ремарка. CRA не поддерживает поддержку absolute paths из под коробки, требуется установить дополнительно CRACO + react-app-alias. Если есть другой, поделитесь пожалуйста. :)

[@it-sin9k]

Прям из коробки нет, нужно jsconfig еще допилить, вот как тут и не нужно будет react-app-alias create-react-app.dev/docs/importing-a-component/

[@_boolive_]

Без проблем перешел с webpack на vite и реализация SSR стала попроще

[@igor_cojocaru]

@АйТи Синяк Что на счёт того что говорят о смерти create-react-app? В новой документации не рекомендуют его использовать на новых проэктах

[@it-sin9k]

Уже несколько человек в комментариях говорит об этом. Лично я жду, что React команда порекомендует использовать, на то и будем планировать переходить. Пока сижу на react-scripts :)

[@nikolaysmolov8031]

Привет! Спасибо за ролик! Я не сильно опытный разработчик и может быть поэтому столкнулся с такими проблемами, которых в cra просто нет) а именно, если проект маленький и нет необходимости как-то хитро настраивать линтер и окружение для тестирования то cra это ваш выбор. Лично я столкнулся с проблемами с jest, он не поддерживает es module и пришлось потанцевать с бубном , чтобы настроить его запуск и ставить отдельно babel. С baseurl проблема решается плагином без всяких алиасов.

[@it-sin9k]

Спасибо за полезный комментарий! Думаю другим зрителям будет полезно почитать)

[@nazarshvets7501]

jest на vitest можно было сразу мигрировать. Там один конфиг для vite и vitest шарится. Надо только пару опций добавить, и drop-in replacement готов

[@alexandrkositsky7698]

для jest есть ts-jest, который работает с ES modules и бабель не надо ставить. Там правда надо в доке найти нужный конфиг. А линтер настроить - это 5 секунд.

[@anzay911]

Так в тестовую ветку затянуть и там проверить federation, env и ESM.

[@ArtikMan1994]

Синяк, сделай пожалуйста видео при желании на тему: "React reducer + context на хуках vs Redux. Что лучше". Потому что мне кажется, с этими хуками можно обойтись без редакса?

[@it-sin9k]

Мне кажется подобную тему я уже раскрыл в нескольких видео, но вот доклад мой, который хорошо это все подытожит: kzbin.info/www/bejne/nIjQXqBnYsSXjKM

[@ArtikMan1994]

@@it-sin9k посмотрю. Спасибо!

[@typingaway]

Проект не мигрировали, используем вит для uikit на реакте со старта, проблем с безопасностью зависимостей нет. Скорость дев сборки и правда впечатляет

[@HandsomeRoman]

Расскажи про микрофронтенд часть на своем проекте

[@it-sin9k]

Тема микрофронтенда еще не до конца избита на всех конференциях?)

[@SanoTheLitch]

Тоже встрял с миграцией микрофронта и интеграцией в родительское на Webpack'e, в итоге забил...но 3 следующих реакт-проектов, разрабатывавшихся с нуля сразу начинал с Вити - просто чистейший кайф. Из замеченных проблем: - Модули только на CommonJS могут (и скорее всего будут) не работать - Фанатский плагин ModuleFederation крайне сырой с кучей issues на гитхабе - Могут быть проблемы с UI-китами (но скорее всего с вебпаком будут те же самые) - Конкретно у меня не завелось использование именованных экспортов при использовании подхода PublicAPI. Где то читал, что у Вити с этим проблемы, но возможно я сам дурак т где-то не разобрался

[@it-sin9k]

Ого, спасибо за фидбек :) Очень полезно)

[@alexandrkositsky7698]

Он же автоматом конвертирует модули на CommonJS в ESM формат, как и rollup, поверх которого он работает. С чего бы вдруг они не будут работать?

[@it-sin9k]

@@alexandrkositsky7698 ничего автоматом не происходит, Это делает создатель пакета с помощью каких то инструментов по идее. И насколько эти инструменты оттестированы, если толком никто не пользуется ES модулями неизвестно. И добавили ли ES модули для пакета вообще это вопрос на усмотрение создателя пакета насколько я понимаю. Так что все может быть :)

[@РоманНарожнов]

Спасибо!

[@baileysli6235]

Душный коммент, но без него никак. "Вит", а не "Вайт"

[@TarasovFrontDev]

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

[@it-sin9k]

ахах) позитивное мышление!)

[@fallout407]

два дня назад, проходил подобный путь)) В итоге понял, что переводить на vite react проект - не вариант, а вот новый стартанул отлично)

[@АнатолийГорбов-о1ь]

Тоже хотел сделать проект на Vite + React, но засомневался стоит ли оно того, спасибо за видео, думаю что все же разработчики CRA просто тоже обновят используя лучшие практики из Vite, тк поддержка у реакта мощная, врятли они это так оставят))

[@it-sin9k]

Про это запланировал отдельное видео)

[@kirillunlimited]

Не вайт, а вит - ты же сам показываешь скриншот с транскрипцией из документации

[@lomeat]

Мне Vite не зашел тем, что HMR работает только с текущим куском кода. То есть дебажить проект сложно, нужно каждый раз делать общий билд, чтобы найти все изьяны. А это тратить кучу времени. А вебпак все приложение сразу показывает. Сейчас работаю с некстом и там та же хрень.

[@alexandrkositsky7698]

Если что, то в нектсе нет вита, там тоже вебпак

[@lomeat]

@@alexandrkositsky7698 +

[@user-bu3hzj734e4r]

Я называю Витэ 😅

[@sochidenis]

глючный и урезанный этот вайт, поэтому и быстрей работает за счет уменьшения зависимостей. Но React Developer tools в браузере не поддерживает, автоимпорт в редакторе тоже хуже работает с ним и зачем тогда эта скорость? Лучше бы про эти глюки расказали. Для пэтпроектов пойдет, но не более. Ждем турбопак.

[@nikitazharinov2329]

Да, vite хорош 👍🏻

[@Epic0n]

На вайте есть один реакт проект начатый с нуля, пока без проблем. К стати jest не дружит с модулями. Но есть решение vitest Угадайте от кого? )))

[@it-sin9k]

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

[@corvus278]

На сколько я знаю, create react app по сути уже не поддерживается, поэтому не стоит ждать от него этих фичей Так что новые проекты лучше стараться начинать на vite

[@it-sin9k]

Планирую записать отдельное видео) о том куда движется React и как стоит начинать проект по мнению React team :)

[@serhioramires3166]

@@it-sin9k Получилось подготовить материал?

[@it-sin9k]

​@@serhioramires3166 да :) вот видео: kzbin.info/www/bejne/rnLYqnx7ndV-n5o

[@JenechekDv]

Спасибо, всё по полочкам разложил. Vue на vite тоже быстрее работает)

[@tomtomson8099]

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

[@it-sin9k]

ага) не забайтишь не раскрутишься))

[@cto_of_everything]

Вроде он же "Вит", не?)

[@evgeniypolovniy]

У них же на главной странице написано как правильно произносить, ты даже в видео показал этот абзац... Ну Вит же, а не Вайт

[@stivandsoft]

А зачем ещё кто-то использует react-scripts, особенно для сложных проектов? 😮 Ведь webpack не так сложно настроить и намного гибче с кофеином использовать. Особенно с кешированием сборки в 5 вебпаке все стало намного быстрее работать.

[@it-sin9k]

Давайте представим ситуацию, когда проект длится допустим уже 7 лет. В начале он был допустим на 2 вебпаке с react-scripts версии допустим 3. Спустя года 2 вышел вебпак 3 и вышла новая версия react-scripts со всеми настройками для вебпака 3. Обновить react-scripts проще, чем изучать все фишки webpack 3 и его настройки. Еще года через 2 вышел webpack 4 / webpack 5 с разными новыми настройками. Не хотелось на это все тратить много времени. А с высокой вероятностью вообще хз обновлял ли бы кто то этот вебпак и тем более его настройки спустя годы. Поэтому так проще и экономнее жить, чем кастомный сетап поддерживать

[@stivandsoft]

@@it-sin9k так это почти про мой один проект) Проекту около 5 лет уже. Был react-scripts, хотя конфигурировать умею и пользуюсь вебпаком как одним из сборщиков с его первой версии. Первые два года этого проекта использовал react-scripts потом нужно было конфигурировать поставил rewared расширение, потом перевел на react-scripts-ts, а эту сборку кучу лет никто не обновлял. Потом вынужден был на кастомную сборку перевести с конфигурированием вебпака, и сразу на четвертый, а потом и на пятый. И затем подумал, почему не сразу перевел, а терпел кучу времени устаревшие зависимости. Все стало намного гибче и не зависишь от чужих зависимостей react-scripts. Теперь буду на Vite переводить, как минимум дев режим для ускорения хот релоада, а прод если, что можно на вебпаке также собирать. Настраивать сборку для фронта это ещё как-то естественно. А вот какой-нибудь автодеплой с градлом для Java или клейком для C# это уже не очень, тут для девопса задача, но приходилось самому настраивать

[@JohnyDNU]

Vite - вторая причина, почему я перешёл с React на Vue

[@it-sin9k]

а какая первая?

[@JohnyDNU]

@@it-sin9k Точно не помню. Кажется это была возможность встроить в существующую страницу кастомные html тэги с использованием разметки (вместо JSX) без подключения кучи зависимостей типа babel и т.п.

[@fuad2069]

ВИТ ВИТ ВИТ, не вайт!