Правильный импорт 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
файле не требуется.