Как стать автором
Обновить

Сравнение тяжеловесности популярных библиотек UI компонент для Vue 3

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров9.7K

Библиотеки 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

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

Библиотека

Size js, KB

Size css, KB

GitHub stars (K)

Vue 3 & HTML

52

0.2

Vuetify 3

203

72

37.4

Quasar

178

201

23.8

PrimeVue

138

159

3.9

Element Plus

843

325

20.4

Ant Design

1132

598

18.3

Vant UI

87

192

21.5

Vuestic UI

515

186

2.9

Naive UI

313

0.2

13

Agnostic UI

67

97

0.64

Vanilla Components

650

0.2

0.15

Результаты довольно неожиданные. 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, но разница в весе очевидна.

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

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Какую библиотеку UI компонент для Vue вы используете?
26.91% Quasar60
26.46% Vuetify59
13.9% PrimeVue31
3.59% Ant Design8
0.9% Vuestic UI2
17.94% Element Plus40
4.93% Naive UI11
0.45% Agnostic UI1
1.79% Vanilla Vue4
2.24% Vant UI5
26.91% Пишу свои компоненты60
Проголосовали 223 пользователя. Воздержались 83 пользователя.
Теги:
Хабы:
Всего голосов 8: ↑8 и ↓0+8
Комментарии7

Публикации

Истории

Работа

Ближайшие события

Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область