Всем привет. Сегодня я вернулся с отпускной поездки, проснулся, сделал себе кофеек, заказал завтрак, и решил глянуть наконец-то вышедший State Of JS 2023.
Читаю, открываю секцию библиотек - и первое, что я вижу
33% момента тоже ужасают (про jquery молчу) - но давайте поговорим про лодаш.
Я последние годы являюсь его ярым антагонистом. Я считаю, что многие либо используют его неправильно, либо используют без смысла - а для новичков он даже может быть вреден. Попробую объяснить свою позицию - поехали!
1. Установка
Первое, чем нас встречает лодаш - набором библиотек. У вас есть выбор:
Установить основной лодаш целиком (но он может криво работать на ласт вебпаке и тем более Vite - и ругаться на ESM)
Установить отдельно пакеты - но они не обновляются и потом будут депрекейтнуты
Установить lodash-es, но он тоже может криво работать на разных версиях вебпака или окружениях (SSR/CSR), иногда придется пострадать со странными ошибками - просто другими, нежели с обычной версией
lodash-fp, но он депрекейтет 8 лет назад
lodash-amd и использовать AMD лоадер (кто-то еще так делает?). И пакет не обновлялся еще больше основного
Помимо этого, вам, в идеале, надо настроить плагин бейбла и вебпак) На выбор представлено множество вариантов кода
Итого, вы скорее всего не сможете установить и использовать лодаш одной командой инсталла - на всех проектах уж точно.
Кроме того, вот эти отдельные бандлы вызывают проблемы - иногда хочется инстиктивно установить только то, что нужно, но они могли не обновляться более пяти лет - и содержать уязвимости. А предупреждения от разработчиков никто не читает, конечно.
А если сможете - см. пункт 2.
2. Использование
Итак, что нам рекомендует документация:
Если мы будем следовать этой рекомендации, мы подключим целиком весь бандл лодаша. Минифицированный бандл на CDN весит 72 килобайта. Вроде и немного, но грузить все методы браузеру тоже будет грустновато.
Ну ладно! Что у нас там дальше:
Итак, что из этого нам выбрать?
Полную сборку грузить, наверное, не очень
Неплохо выглядит core, но в документации нет информации, что туда входит
Для чего нужен FP - никто не поймет
Категории методов грузить удобно, но там их тоже куча + надо смотреть доку
К чему я веду. Представьте - вы новичок и зашли сюда, вам нужно по бырику взять метод глубокого клонирования. Вы смотрите на доку и ничего не понимаете. Что вы сделаете?
Правильно. Скорее всего вы подгрузите весь lodash, в лучшем случае - core. Также допустимы ошибки по типу загрузить отдельный npm пакет - к чему это может привести писал в конце первого раздела.
По итогу, большинство проектов грузят весь лодаш целиком, хотя им нужны оттуда методов пять. При условии корректной настройки babel, webpack (или другого сборщика), у вас есть шанс получить работающий tree-shaking, которого нет из коробки по умолчанию. lodash-es должен работать нормально, но это при условии, что не возникнет проблем при его установке - или разработчик не сдастся их решать.
Неконсистентность пакетов и подключения вызывает такие запросы в топе гугла по запросу "lodash esm":
Круто, не правда ли? Но мы идем дальше!
3. Вы используете из него 5 методов
Конечно, это применимо не ко всем проектам - в основном, к старым. Но невероятно част тот кейс, когда разработчик подключает лодаш ради... одной-двух функций.
В современном стеке, ОЧЕНЬ много методов лодаша уже было портировано. Я люблю задавать вопрос на собесе - как глубоко склонировать объект? Больше половины, особенно новичков, называют "лодаш дипклон" - что, на мой взгляд, является проблемой, при условии, что существует structuredClone, который имеет неплохую поддержку и полифиллы, а также на крайняк куча легковесных современных библиотек.
По итогу, lodash во многих случаях позволяет вам делать то, что УЖЕ поддерживается в JS... но хуже. Понятно, что некоторые методы "незаменимы", но возьмем несколько примеров:
array.drop -> slice
array.concat -> filter
array.fill -> splice
findIndex/findLastIndex/indexOf/join/reverse/slice -> натив
flatten -> flatMap
Ну и так далее. Но вы скажете, что же насчет незаменимых методов? Давайте посмотрим на те, что я видел чаще всего:
debounce -> это несколько строк кода. Вы можете написать свой крохотный метод с удобным API и так, как вам нужно
delay -> это вообще setTimeout, лучше написать свой асинхронный sleep из 5 строк кода
clone -> structuredClone покрывает почти всё, кроме чего-то реактивного
Это один из тех методов, который я не могу рекомендовать как 100% заменимый - я бы его заменял библиотекой для клонирования - по типу https://www.npmjs.com/package/klona
difference -> нормальных замен нет, но есть замены, по типу deep-object-diff и других (и там не очень много кода! Мы, например, написали свой метод на основе deep-object-diff)
В остальном, по моим наблюдением, другие методы либо не используются, либо могут быть весьма легко заменены нативными.
4. modern - это ложь
На сайте lodash указано, что он modern - что далеко от истины. Лодаш не использует современные сборщики, не обновляется годами, множество методов есть в нативе (и нативные, вероятно, будут быстрее - и не жрать место/память как минимум).
Кроме того, при использовании аналогов из лодаша вместо натива вы упускаете возможность следить за тем, что добавляется в натив - а там много всего очень интересного! Всякие toSorted, новые методы коллекций - можно использовать в ноде, можно обмазаться полифиллами (смотря какие версии браузеров вам нужны). Использование этих методов в том числе прокачивает ваше знание как джаваскриптера. И для этой прокачки вам точно не нужен лодаш.
Резюме
Лодаш:
Имеет множество методов установки, каждый из которых может вызывать проблемы и головную боль с подключением
Легко подключается целиком вместо нескольких нужных вам методов
Не обновляется
Не нужен в 95% случаев
Мешает пониманию действительно современных методов
Вам не нужен лодаш. Пройдитесь по своим методам, выкиньте доступные в нативе, замените недоступные (если они вам точно нужны).
А если уж вы его используете:
Используйте es-версию с костылями под TS, если потребуются, или обычную с плагинами для tree-shaking
Не используйте эти отдельные пакеты - только
lodashилиlodash-esНе увеличивайте его процент использования в вашем коде. Пожалуйста
Вы может быть еще и Moment используете? Тоже пора обновляться!
Хороший пример
Хотел бы показать прекрасных ребят из UnJS, создавшие набор un-iversal библиотек: https://unjs.io
Почему это топ:
Действительно современный и очень легковесный код с минимум сборки
Декомпозированные пакеты - берете то, что нужно
Не нужно ставить всякие плагины babel/ts - всё работает из коробки, как только импортнете. Установил и используй!
Я давненько хотел сделать эту статью. Есть тут любители lodash? Поделитесь, продолжите ли вы его использовать после всех пунктов выше - и почему? А если вы давно хотели уйти, но не хватало аргументов - ловите :)
И читаем State Of JS 2023: https://2023.stateofjs.com/en-US (я написал резюме на русском в своем тг канале: https://t.me/webdanil/137. Это же можно так делать, да? Вроде не пиарюсь... почти...)
