VITE. Новый подход к сборке фронтенд проектов.

Что такое Vite, чем отличается от других бандлеров, таких как Webpack, Parcell, Browserify. С нетерм.

💻 00:00 - Для кого видео
💻 00:14 - О чем видео
💻 00:32 - Проблема
💻 03:59 - Как работают бандлеры
💻 05:18 - Как работает vite
💻 08:25 - с помощью Vite разворачиваем проект на React’e
💻 23:16 - Немного о Gulp. Заключение

Полезные ссылки:

[АндрейАлексеев-чв]

Спасибо за краткий обзор! Теперь слова «начать проект с vite» не пугают, а наоборот))

[focus]

Привет, пишу с обратной связью по данному видео. Ммм как бы так сказать. Суть ролика по названию это Vite-он же сборщик проектов. Но в ролике 80/20 React/Vite. То что вы установили sass в проект на React это как бы и Webpack делает так же быстро и легко. А вероятнее всего нужно было рассказать именно о том как native code собирать. Но в любом случаем респект. Так как стараешься делится знаниями с начинающими. 🫡

[alex_topunov]

Отличный ролик, наглядно показывающий преимущество Vite над другими бандлерами :)

[MrFalliin]

Топовые видосы по разработке, принимай нового подписчика в банду)

[АндрейАлексеев-чв]

vite подходит для небольших проектов, вроде сайтиков на несколько страниц или лендинга, но что делать SEO? Ведь как правило таким сайтикам оно нужно. Vite же рассчитан на рендер из JS. Я собрал сборку vite + pug который мне генерит статические html, но она с нюансами))

[АндрейАлексеев-чв]

Так же некоторые рекомендуют вите как альтернативу реактовскому cra, тоже из за скорости, да и cra был создан в 2016 году, все таки требования к приложениям уже другие сегодня

[michaeljames]

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

[ЕвгенийСтаросветский]

Для больших проектов, которым нужна гибкая настройка, Vite не подходит. Пробовал.
Думаю, лучшей функциональности, бóльших возможностей и гибкости чем у Webpack нет.

Например, сгенерить runtime, разбить на чанки или настроить index.html так же хорошо, как это делает Wepback не выйдет.
Конфиги или неполные, или их попросту нет для той или иной вещи.
Или ещё, если нужна legacy сборка, то единственный вариант использовать их плагин, в котором даже нельзя указать теймплейт — всё сгенерится в одну конкретную директорию с фиксированным наименованием. Смотрел исходный код этого плагина, по этому моменту всё было захардкожено.

А так, для небольших сайтиков или приложений годится.

[WERWOLION]

Такой момент в Vite, сами прописываются пути, так например все картинки и пр. кидаются в одну папку assets, в доке нет примером настройки assets, только 3 строки что можно настраивать.
Из за этого использовать vite невозможно т.к просто нужно чтобы 200 картинок скопировались с сохранением иерархии папок, SVG в svg паке, фафиконы отдельно и т.д.

В общем мрак.

[stanislav_ovv]

На боевом проекте на небольшом приложении есть необходимость запускать сборку не локально, а на сервере в режиме --watch, чтоб делать небольшие правки и видеть изменения. Так вот webpack 4 пересобирает в 4-5 раз быстрее на тех же файлах, чем vite. Поэтому отказались от vite. Так что у меня двойственное впечатление. Вроде vite в dev режиме быстр, но опять же не гибок в настройках, для классических сайтов ну вообще не подходит, в watch режиме адски тупит, также в watch режиме невозможно настроить source map на стили. Как то так...

[alephzero]

На гитхаб Пейджес index.html не открывается