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

Было проведено исследование - взяты три HTML элемента: Button, Input и Select, и проверено, насколько увеличатся js и css бандлы если использовать для них одну из 10 распространенных UI библиотек для Vue 3.

Создать стилизованный по своему желанию компонент Button - это несколько килобайт кода и стилей. Представляет интерес, сколько "довеска" даёт каждая библиотека к этим нескольким килобайтам.

Почему? Потому что каждый килобайт javascript-a даёт нагрузку на браузер и прямо влияет на UX. И на DX.

Исследование

При тестировании не рассматривались возможности библиотек для построения лэйаутов, поддержка тем и прочий их функционал. Исследовался только footprint библиотек на пустом проекте.

Код тестов доступен в репозитории. Каждой UI библиотеке соответствует своя ветка (branch) репозитория.

Каждая библиотека устанавливалась согласно её документации, но при этом у некоторых не завелись сразу CSS стили. Наборы иконок для чистоты эксперимента также не ставились, поэтому у компонента Select в некоторых библиотеках визуальный дефект.

Скриншоты отображения кнопки, поля ввода и селекта в различных библиотеках:

Скриншоты

Vue 3 & HTML

Vuetify

Quasar

PrimeVue

Ellement Plus

Ant Design for Vue

Vant UI

Naive UI

Vuestic UI

Agnostic UI

Vanilla Components

Результаты

Среда: Node v18, Pnpm v8.3, Vue v3.2, Vite v4.3.9

Получившиеся размеры бандлов (округленно):

Результаты довольно неожиданные. Vuetify и Quasar ожидаемо тяжелы, но многие другие библиотеки характеризуют себя примерно как "lightweight, flexible & customizale UI library for Vue 3". Ну и у всех, конечно же, tree-shaking. Ради интереса, я добавил в квазаровский проект QTable как довольно тяжеловесный компонент - js бандл подрос на еще 30 КБ

Выводы

Если нужны качественные проверенные временем компоненты, и их надо много, то Quasar и PrimeVue вне конкуренции. Vuetify выглядит неплохо, но дискредитировал себя долгим переходом на Vue 3 (изначально неудачной архитектурой) и текущей неполнотой.

Ant Design for Vue и Element Plus наоборот в аутсайдерах.

Naive UI засунула стили в js бандл (из-за этого не было проблем или дополнительных телодвижений со стилями при установке в отличие от большинства других библиотек), поэтому точно сказать о ней что-то сложно. Но набор компонент вполне приличный.

Очень интересен Vant UI как прекрасным результатом, так и интересным подбором компонент и композаблов. Библиотека ориентирована на мобильные устройства (работа со свайпами и прочее). Проект активно развивается. Интересно, что у него GitHub звезд почти как у Quazar-a, хотя он не такой известный.

Ну и первое место - Agnostic UI. У них есть вариант элементов чисто с CSS, но и с компонентами результат впечатляющий. Конечно, компоненты не такие богатые и прилизанные, как у Vuetify или Element Plus, но разница в весе очевидна.

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