На работе мы используем lodash в наших интерфейсных приложениях. Мы также используем lodash в общих модулях, которые потребляют наши приложения. Иногда наше приложение использует lodash-es, а какой-то модуль использует отдельные утилиты (lodash.utilityName), и наоборот. Очевидно, что дублирование кода не является идеальным решением, поэтому нам нужно было выбрать одно или другое. Какой из них приведет к меньшему размеру пакета?

Результаты

Несмотря на то, что сравнение проводилось между lodash-es и отдельными утилитами lodash, я также протестировал исходный common-js lodash. Пакеты были созданы с использованием следующего кода.

import drop from 'lodash/drop';
import drop from 'lodash-es/drop';
import drop from 'lodash.drop';

В таблице показано, что отдельные lodash.utility пакеты меньше, пока количество пакетов не увеличится. Когда мы достигаем отметки в 10 утилит, lodash-es вырывается вперед с наименьшим размером пакета. Я связываю это с lodash-es возможностью совместного использования кода между функциями, тогда как отдельные lodash.utility функции разрознены и не могут совместно использовать код.

Как были выбраны коммунальные предприятия?

Пакеты были выбраны примерно в случайном порядке, чтобы не брать пакеты одного определенного типа, например просто массив или функции даты. У функций одного типа могут быть одни и те же утилиты, и я не хотел, чтобы это было фактором в тестах. Однако есть некоторые утилиты, которые намного больше, чем другие, и это видно по несогласованности увеличения размера по мере увеличения количества утилит.

Как был создан пакет?

У меня была очень простая конфигурация веб-пакета для запуска webpack-bundle-analyzer вот так:

// webpack.config.js
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new BundleAnalyzerPlugin(),
  ]
};

Затем мой src/index.js просто импортировал функции и сделал ссылку на них, чтобы они не были искажены деревом.

// src/index.js
import drop from 'lodash-es/drop';
import omit from 'lodash-es/omit';
import fill from 'lodash-es/fill';
import flatten from 'lodash-es/flatten';
import head from 'lodash-es/head';
drop
omit
fill
flatten
head

Подведение итогов

Спасибо, что нашли время прочитать статью. Надеюсь, она вам пригодилась. Далее я посмотрю, можно ли заменить сам Lodash на Just (https://github.com/angus-c/just), облегченную замену Lodash.