Мое первое впечатление от использования Vite в коммерческой web-разработке

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

Что такое Vite и зачем он нужен

Vite — это достаточно новый и быстро набирающий популярность инструментарий, предназначенный для упрощения разработки и сборки современных веб-приложений. Фактически является одной из альтернатив популярного Webpack.

Как вы уже наверное из описания поняли, Vite берет на себя две роли:

• Dev-сервер, для удобной и интерактивной разработки с применением кучи различных технологий (TypeScript, всякие веб-фреймворки, библиотеки и пр.).
• Сборка проектов для дальнейшего распространения и использования (production).

Первоначальным автором Vite является известный в кругах веб-разработки Эван Ю (Evan You), он же автор фреймворка Vue. На сегодняшний день Vite обладает достаточно большим комьюнити, имеет стабильные версии и активно продолжает развиваться.

И зачем мне Vite, если есть Webpack?

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

Именно из-за плагинов, которые в свою очередь нередко страдают мелкими несовместимостями (о которых нередко узнаешь на Stackoverflow, а не в документации к плагинам), настраивать Webpack зачастую является нетривиальной задачей. При этом отмечу, что у самого Webpack вполне хорошая документация.

Так вот, в итоге весь этот комбайн начинает работать неторопливо, а тот же webpack.config.js разрастается до неприличного вида, с дичайшей смесью CommonJS и ESM модулей, ибо еще далеко не все плагины к Webpack используют ES Modules. В конце концов, смотря на такой раздутый файл, ловишь себя на мысли, что слово "config" в его названии как-то лишнее, ибо это уже становится мало похожим на файл конфигурации, в классическом понимании.

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

Чем мне поначалу понравился Vite

Впервые я использовал Vite при написании полифилла для псевдокласса :has в DOM Selectors API, где он просто использовался для сборки отдельных бандлов представленных в виде отдельных UMD, CommonJS (да-да, его тоже пришлось отдельно делать) и ES Modules. Тогда я оценил то, насколько просто это делается в Vite, без необходимости написания гигантских конфигов, да еще и cо встроенной поддержкой TypeScript.

Конечно в Vite как и в Webpack тоже можно создавать мудренные конфиги через vite.config.js, но все-равно все это куда проще и с использованием современной ES Modules (без всяких CommonJS).

Вообще для сборки проектов, под капотом у Vite используется Rollup и если ранее вы его уже где-то использовали, то многие настройки в Vite вам будут уже знакомы, да и некоторые плагины к Rollup вполне могут работать и с Vite.

Vite + Vue

Где-то во второй половине лета, пришла задача на разработку встраиваемого web-приложения, в котором была отличная возможность поработать со связкой Vue + Vite + (TypeScript, Tailwind (CSS фреймворк), Pinia и т.д.). Это был отличный шанс испытать Vite уже в коммерческой разработке.

Раньше для базовой инициализации проекта на Vue было принято использовать Vue-CLI, который работал с Webpack, но в сообществе Vue с недавних времен официально рекомендуемой утилитой стала create-vue, которая формирует основу проекта на базе Vite. В общем, решил пойти рекомендованым путем, а заодно для роли стейт менеджера попробовать Pinia вместо Vuex, ибо очень уж он неудобен был в работе с TypeScript.

С настройкой Tailwind тоже никаких проблем не было, поскольку вся информация по его применению с Vue + Vite есть в официальной документации, что вообще порадовало тем, что крупные сторонние разработчики также уделяют внимание работе с Vite.

В общем, через какое-то время, после того как проект немного разросся, я оценил еще одно преимущество применения Vite в виде превосходной скорости работы HMR (Hot Module Replacement) при ощутимо меньшей прожорливости по ресурсам, по сравнению с Webpack и его плагинами. Если кто не знает, суть HMR состоит в горячей замене изменяемого модуля по мере редактирования кода, без необходимости полной перезагрузки страницы, т.е. проще говоря, изменяя код отдельного компонента вы можете интерактивно на экране наблюдать за изменениями.

Так как я разрабатываю проекты с использованием удаленного сервера разработки (через Remote Develop), к Vite может быть одновременно подключен десяток устройств (мобильные устройства, ноутбуки, большие мониторы и пр.), чтобы интерактивно видеть в них изменения по мере написания веб-приложения. Особенно это удобно в тот момент, когда вы пишете в коде бесчисленное множество классов CSS-фреймворка Tailwind. Также это удобно еще и тем, что позволяет легко и непринужденно подключать коллег для промежуточного ревью, обсуждения и интерактивной корректировки внешнего вида и функционала итогового приложения согласно требованиям.

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

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

Заключение

От себя хочу сказать, что Vite мне очень понравился. Не могу сказать что он является полноценной заменой Webpack во всем, но тем не менее у этого замечательного инструмента есть все шансы занять свою нишу среди инструментов веб-разработки, за счет своих преимуществ, в виде простоты конфигурации, встроенной поддержки TypeScript, скорости работы и неприхотливости к ресурсам, а также поддержки большого комьюнити.

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

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