Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Библиотеки 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
PrimeVue
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, но разница в весе очевидна.
А, вообще, свои компоненты (если это не что-то типа сложных таблиц или компонента выбора даты) - наилучший вариант для любителей эффективного кода. Ну и делать базовые компоненты-обёртки, если используешь компоненты других библиотек.
