Правильный импорт lodash методов

После анализа bundl'a разрабатываемого приложения можно наблюдать такую картину:

Меня насторожил момент, что lodash занимает хороший такой кусок в 95kb, хотя используется всего 3 функции. И вот к чему привели поиски.

Способы импорта lodash методов

• Импорт всей библиотеки

  import * as _ from 'lodash';

  Размер импортируемого кода максимальный - 93 kb gzipeed

• Импорт метода из всей библиотеки 'lodash'

  import { cloneDeep, find, extend } from 'lodash';

  Размер импортируемого кода максимальный! - 93 kb gzipeed Такой способ не уменьшает размер бандла.

• Импорт метода из 'lodash/fp'

  import { cloneDeep, find, extend } from 'lodash/fp';

  Размер импортируемого кода приемлемый - 40 kb gzipeed.

• Импорт метода из метода библиотеки

  import cloneDeep from 'lodash/clonedeep';
  import find from 'lodash/find';
  import extend from 'lodash/extend';

  Размер импортируемого кода минимальный ~ 24kb gzipeed. При использовании TypeScript требует указания "allowSyntheticDefaultImports": true в tsconfig.json файле.

lodash-es

Альтернативой последнему подходу является использование пакета lodash-es вместо оригинального lodash

Если использовать стандартные импорты, то ситуация не меняется.

import { cloneDeep, find, extend } from 'lodash-es';

Из-за модулей библиотека становится даже больше - 152 kb gzipee

Правильное использование следующее:

import cloneDeep from 'lodash-es/cloneDeep';
import find from 'lodash-es/find';
import extend from 'lodash-es/extend';

Размер импортируемого кода почти минимальный ~ 27kb gzipeed. Правок в tsconfig.json файле не требуется.

• https://github.com/lodash/lodash/issues/3192
• The Correct Way to Import Lodash Libraries - A Benchmark
• https://medium.com/@martin_hotell/tree-shake-lodash-with-webpack-jest-and-typescript-2734fa13b5cd