Правильный импорт 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 в VS Code

Настройка Visual Studio Code используя расширение Debugger for Chrome для отладки Angular приложений
03 декабря 2017 г. в Angular

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

Angular. Can't set breakpoints in VS Code

Вариант решения проблемы, когда не срабатывают точки остановки при разработке Angular приложений в редакторе VS Code
10 апреля 2018 г. в Angular

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

Angular Storybook

Установите пакет npm i @storybook/cli -g и запустите команду sb init в корне angular проекта.

30 октября 2018 г. в Angular