Вам не нужен Lodash. Хватит! Пожалуйста
Всем привет. Сегодня я вернулся с отпускной поездки, проснулся, сделал себе кофеек, заказал завтрак, и решил глянуть наконец-то вышедший State Of JS 2023.
Читаю, открываю секцию библиотек — и первое, что я вижу
50% и топ 1. За что?
33% момента тоже ужасают (про jquery молчу) -, но давайте поговорим про лодаш.
Я последние годы являюсь его ярым антагонистом. Я считаю, что многие либо используют его неправильно, либо используют без смысла -, а для новичков он даже может быть вреден. Попробую объяснить свою позицию — поехали!
1. Установка
Первое, чем нас встречает лодаш — набором библиотек. У вас есть выбор:
Установить основной лодаш целиком (но он может криво работать на ласт вебпаке и тем более Vite — и ругаться на ESM)
Установить отдельно пакеты -, но они не обновляются и потом будут депрекейтнуты
Установить lodash-es, но он тоже может криво работать на разных версиях вебпака или окружениях (SSR/CSR), иногда придется пострадать со странными ошибками — просто другими, нежели с обычной версией
lodash-fp, но он депрекейтет 8 лет назад
lodash-amd и использовать AMD лоадер (кто-то еще так делает?). И пакет не обновлялся еще больше основного
Помимо этого, вам, в идеале, надо настроить плагин бейбла и вебпак) На выбор представлено множество вариантов кода
Мммм, node 6
Итого, вы скорее всего не сможете установить и использовать лодаш одной командой инсталла — на всех проектах уж точно.
Кроме того, вот эти отдельные бандлы вызывают проблемы — иногда хочется инстиктивно установить только то, что нужно, но они могли не обновляться более пяти лет — и содержать уязвимости. А предупреждения от разработчиков никто не читает, конечно.
А если сможете — см. пункт 2.
2. Использование
Итак, что нам рекомендует документация:
Если мы будем следовать этой рекомендации, мы подключим целиком весь бандл лодаша. Минифицированный бандл на CDN весит 72 килобайта. Вроде и немного, но грузить все методы браузеру тоже будет грустновато.
Ну ладно! Что у нас там дальше:
Итак, что из этого нам выбрать?
Полную сборку грузить, наверное, не очень
Неплохо выглядит core, но в документации нет информации, что туда входит
Для чего нужен FP — никто не поймет
Категории методов грузить удобно, но там их тоже куча + надо смотреть доку
К чему я веду. Представьте — вы новичок и зашли сюда, вам нужно по бырику взять метод глубокого клонирования. Вы смотрите на доку и ничего не понимаете. Что вы сделаете?
Правильно. Скорее всего вы подгрузите весь lodash, в лучшем случае — core. Также допустимы ошибки по типу загрузить отдельный npm пакет — к чему это может привести писал в конце первого раздела.
По итогу, большинство проектов грузят весь лодаш целиком, хотя им нужны оттуда методов пять. При условии корректной настройки babel, webpack (или другого сборщика), у вас есть шанс получить работающий tree-shaking, которого нет из коробки по умолчанию. lodash-es должен работать нормально, но это при условии, что не возникнет проблем при его установке — или разработчик не сдастся их решать.
Неконсистентность пакетов и подключения вызывает такие запросы в топе гугла по запросу «lodash esm»:
Круто, не правда ли? Но мы идем дальше!
3. Вы используете из него 5 методов
Конечно, это применимо не ко всем проектам — в основном, к старым. Но невероятно част тот кейс, когда разработчик подключает лодаш ради… одной-двух функций.
В современном стеке, ОЧЕНЬ много методов лодаша уже было портировано. Я люблю задавать вопрос на собесе — как глубоко склонировать объект? Больше половины, особенно новичков, называют «лодаш дипклон» — что, на мой взгляд, является проблемой, при условии, что существует structuredClone, который имеет неплохую поддержку и полифиллы, а также на крайняк куча легковесных современных библиотек.
По итогу, lodash во многих случаях позволяет вам делать то, что УЖЕ поддерживается в JS…, но хуже. Понятно, что некоторые методы «незаменимы», но возьмем несколько примеров:
Ну и так далее. Но вы скажете, что же насчет незаменимых методов? Давайте посмотрим на те, что я видел чаще всего:
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. Это же можно так делать, да? Вроде не пиарюсь… почти…)
