Утилитные библиотеки: lodash, dayjs, date-fns и размер бандла

Нужна ли библиотека

Каждый npm install — это байты для пользователя, зависимость, которую надо обновлять, и поверхность для уязвимостей. Утилитная библиотека оправдана, когда встроенного решения нет или собственная версия будет рискованной. Три вопроса: умеет ли это платформа? хватит ли одной функции? насколько вырастет бандл?

Цифры — размер min + gzip из npm-пакетов (приблизительно, зависит от версии). Реальный размер смотрите в отчёте сборки вашего проекта (vite-bundle-visualizer, webpack-bundle-analyzer).

💡 Правило: сравните размер сборки до и после добавления библиотеки; разницу укажите в описании PR.

lodash-es: правильный импорт

lodash — пакет CommonJS: import _ from 'lodash' тянет всю библиотеку (около 25 КБ gzip). lodash-es — те же функции в виде ES-модулей, сборщик отбрасывает неиспользуемое (tree shaking). Установка: npm i lodash-es.

import _ from 'lodash';

// the whole CommonJS library lands in the bundle
console.log(_.chunk([1, 2, 3, 4], 2).length);

// better
import { chunk } from 'lodash-es';

// ES modules: only chunk and its helpers are bundled
console.log(chunk([1, 2, 3, 4], 2).length);

Альтернатива: import debounce from 'lodash/debounce' (один файл из CommonJS-пакета). В современных сборщиках проще lodash-es.

⚠️ import * as _ from 'lodash-es' и цепочки _.chain ломают tree shaking. Импортируйте функции по именам.

Самые полезные функции

Повседневная работа с коллекциями: группировка, словарь, сортировка, сумма. Строка-путь ('city') равна o => o.city.

import { groupBy, keyBy, sortBy, sumBy } from 'lodash-es';

const orders = [
  { id: 1, city: 'Baku', total: 40 },
  { id: 2, city: 'Ganja', total: 15 },
  { id: 3, city: 'Baku', total: 25 },
];