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

Опубликовано в Angular, JavaScript • 12 января 2019 г. • 1 мин. на чтение

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

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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта. 

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

Axios или fetch

Сравнение на примере GET/POST запросов, обработке ошибок и возможности задавать базовую конфигурацию.

RxJS Pipeable Operators

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

TypeScript Enum Flags (bitmask) 

enum FileAccess {
    None,             // 000
    Read    = 1 << 1, // 001
    Write   = 1 << 2, // 010
    Execute = 1 << 3, // 100
    ReadWrite  = Read | Write, // 011
}

const f = FileAccess.Read | FileAccess.Execute;
f & FileAccess.Execute // true

Об subscribe() vs async

О предпочтительности использования async pipe. При OnPush стратегии не требуется вызывать markForCheck() внутри подписки +решение с несколькими | async pipes развёрнутых в одну переменную (внутри шаблона).