Уже почти два года я не писал приложения на традиционном React стэке. В начале года решил попробовать использовать современные практики: сделал небольшой ленгдинг с формой. И как-то много вещей наложилось и JS файл стал весить 500 килобайт!
В моём следущем приложении мне нужен swiper для плавной анимации переключения между "нативными" окнами. Но анализатор говорит, что один swiper весит 80 килобайт. В связи с этим решил найти хороший аналог.
Кандидаты в замену swiper
Для начала выберем библиотеки по простым критериям:
MIT лицензия, потому что, оказывается, есть коммерческие библиотеки галерей.
Больше тысячи звёздочек на github. Это буквально тест на серьёзность.
Так получился список:
tiny-swiper 1,2k звёздочек
keen-slider 4,7k звёздочек
splide 4,9k звёздочек
tiny-slider 5,2k звёздочек
embla-carousel 6,5k звёздочек
glide 7,4k звёздочек
swiper 40,3k звёздочек
Казалось бы, качество библиотек должно соответствовать популярности. Но я удивился, когда протестировал каждую из них.
Для всех библиотек создал одинаковую заготовку приложения и пытался реализовать одну и ту же механику - "нативного" переключения окон. Репозиторий с тестами: https://github.com/notTGY/swiper-2025
Да, перед тем как начать... Я Артем, уже 200 дней подряд каждый день провожу небольшой эксперимент в программировании: написал драйвер http-over-usb для raspberry pi pico, перехватывал сетевые пакеты, собрал базу данных из 70 тысяч игроков Minecraft сервера и не только. https://t.me/fearorlove7734
Tiny Swiper
Это самая маленькая библиотека из всех. И по объёмам исходного кода, и по числу звёзд.
После использования tiny swiper осталось странное ощущение первоапрельской шутки: эта библиотека как будто пародирует остальные. Автор даже приурочил обновление к первому апреля в этой issue: https://github.com/joe223/tiny-swiper/issues/17
И тут важно понять как я нашёл эту issue. Tiny Swiper - единственная библиотека, в которой сломано перетаскивание слайдов мышкой. Там есть критический баг в коде. Пока смотрел исходники и проверял существующие issue, как раз нашёл первоапрельский релиз!
Тем не менее, это отличный вариант для традиционной галереи, когда не обязательно поддерживать перетаскивание мышкой на десктопе. Вот размеры приложения после компиляции.
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-BhivMKrt.css 1.37 kB │ gzip: 0.62 kB
dist/assets/index-Ce5klioh.js 155.51 kB │ gzip: 50.94 kB
Дополнительно скажу, что tiny swiper не делалась специально под React, и поэтому новичок не сможет вставить её за пару часов. Но эта тема неуникальна, как мы увидим.
Keen Slider
Буду честен, эта библиотека идеальна. Она самая лёгковесная из всех, что полностью выполняют необходимый функционал приложения. При этом число звёзд такое маленькое. Keen Slider сильно недооценена.
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-CyLdvlwc.css 1.95 kB │ gzip: 0.77 kB
dist/assets/index-BgS_JgrE.js 160.39 kB │ gzip: 53.00 kB
Да, размеры побольше, чем у Tiny Swiper, но Keen Slider хотя бы работает.
Что касается реализации и Developer Experience, здесь всё тоже отлично. Если мигрировать со swiper'а, то получится просто заменить компоненты на аналогичные div'ы с классами и немного изменить настройки.
Splide
Splide - ещё один первоапрельский анекдот. На главной странице документации, они хвастаются 100% lighthouse очками доступности. И кто же мог предположить, что это единственная из всех библиотек, которая сыпет ошибками в консоль?
Ещё один минус splide - отсутствует плавность при смене слайда при помощи api (нажатием на кнопку, которая сменяет слайд). Это тоже особенность уникальная только для этой библиотеки. Глобально, splide - худший выбор, из всего что имеется (за исключением самого swiper, конечно). Размеры после компиляции получились самыми большими среди аналогов:
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-DKNZ7vJe.css 6.35 kB │ gzip: 1.75 kB
dist/assets/index-ld1cfayq.js 179.58 kB │ gzip: 61.55 kB
Зато Developer Experience на высоте: полноценная документация, api опять сильно похож на swiper. Но это не должно так удивлять. Удивительно, что Splide и Keen Slider отличаются на 200 звёзд, а качество при этом трагически разное.
Tiny Slider
Не путать, с tiny swiper, данная библиотека уже гораздо лучше. Перелистывание плавное и даже через api.
Единственная проблема Tiny Slider в работе с отображением элементов. Если попытаешься хоть чуть-чуть подвинуть CSS, лейаут сразу развалится. И здесь не получилось настроить промежуток между слайдами в 32 пикселя. Хоть эта проблема относится не только к Tiny Slider, мне было довольно обидно, что это единственное останавливает Tiny Slider от полноценной реализации. После компиляции получаем вторую после Splide по размерам котлету, совсем не "tiny":
dist/index.html 0.46 kB │ gzip: 0.30 kB
dist/assets/index-C0WFpECf.css 3.53 kB │ gzip: 1.20 kB
dist/assets/index-DSHLXuF5.js 177.82 kB │ gzip: 59.94 kB
Что касается удобства интеграции... Это ужасно: тонна настроек, демо приложения из документации не работают, не понятно что делать. Остаётся только идти в исходники и читать код библиотеки, а это не то, чем хочется заниматься каждому. И джуна ты не посадишь за это дело.
Embla Carousel
Embla Carousel - единственная библиотека с серьёзным автором. Почему? Из-за того что он писал серьёзный код? Из-за того что сделал нормальный сайт с документацией? Из-за интеграции с React, Vue, Svelte и Solid? Да!
И тем не менее, настроить правильно лейаут не вышло. Опять 32 пикселя между слайдами встают только сдвигая весь сайт на 32 пикселя влево. Тут даже я подумал, что я слаб. Такая хорошая библиотека не может склеивать все картинки между собой, или может? Размеры после компиляции получились не большие и не маленькие:
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-CoHsMTE9.css 1.37 kB │ gzip: 0.63 kB
dist/assets/index-BlmNpVYf.js 164.85 kB │ gzip: 54.75 kB
Но если хочешь как можно меньше думать головой, а хочешь просто интегрировать карусель к себе... Тут тоже промах. У Embla, конечно, есть api под 4 популярных фреймворка, но то как они вынуждают использовать карусель... Однако, есть shadcn/ui carousel, они уже настроили embla за тебя, и тебе остаётся только вставить слайды (к сожалению, это не подходит под мою задачу).
В общем, Embla я бы не рекомендовал использовать в чистом виде, чего не скажу о следущей библиотеке.
Glide
Здесь всё хорошо, библиотека полность реализует мои нужды.
Плюсом скажу, вот что: изначально я запрограммировал примеры со всеми библиотеками в один день. И поначалу получилось не всё. Поэтому через день я переделал все примеры. Все кроме примера на Glide. Да, так получилось, что раньше шаблона сказал про Developer Experience, но здесь я действительно получил удовольствие в добавок к успешной реализации программы.
Это даётся ценой лишних килобайтов, но 6-7 килобайт того стоят, я считаю:
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-DQAd-rWh.css 2.21 kB │ gzip: 0.85 kB
dist/assets/index-CccpI2Gc.js 166.79 kB │ gzip: 53.31 kB
Swiper
Да, это довольно странно, но Swiper тоже надо опробовать. Вдруг я подобрал синтетический пример и сам тезис "заменить Swiper" не сработает, если на Swiper не получится реализовать.
К счастью, чудес не произошло. Swiper идеален. Идеален, пока не посмотришь на размер приложения:
dist/index.html 0.46 kB │ gzip: 0.30 kB
dist/assets/index-P1_ZIguU.css 7.69 kB │ gzip: 3.32 kB
dist/assets/index-CCQKUjC9.js 226.11 kB │ gzip: 71.42 kB
Во всяком случае один плюс у Swiper точно есть. Эта библиотека позволила сделать самую короткую реализацию с точки зрения исходного кода. Всего 54 строки. Но это не самая важная метрика, можно дать Swiper шоколадную медаль.
Вывод
Если хочешь почти бесплатно сбрить 46 килобайт с размера бандла - переходи со Swiper'а на Keen Slider. Пользователи этого не заметят, но ты сможешь добавить на это место, скажем, i18next.
Подумай, переход будет стоить немного сил. Но мне кажется, оно того стоит. В своём новом приложении pixelify уже использую Keen Slider и не чувствую подводных.
DmitryO
Хм, странно. Пару месяцев назад стоял перед подобным выбором, и остановился на Embla. Причем именно из-за гибкости в настройке layout. Правда у меня еще был критерий строго TypeScript, возможно из-за него некоторые из вашего списка в мой не попали.