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

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

bundle_sizes

Меня насторожил момент, что 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 файле не требуется.


Похожие записи

Angular. Редирект по условию

Пример условного перенаправления пользователя в зависимости от некого количества

  • 0 - dashboard
  • 1 - карточка
  • 2 и более - список
10 января 2019 г. в Angular

Не ставить фокус по клику

Проблема заключалась в следующем: когда имеется интерактивный элемент с :focus стилем и вы щелкаете по этому элементу, на нём остаётся focus стиль (outline обводка). У нативной кнопки всё работает as expected, но стоит её добавить любой стиль и, как побочный эффект, меняется её поведение.