Правильный импорт 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. Manually retry http request

На память. Некоторое время назад я решил достаточно необычную задачу, но в последствии на backend`е переделали логику и код был удалён из проекта.

Angular & MVVM

  • Model - just file like user.class.ts
  • View - HTML template of component
  • ViewModel - Typescript part of a component
14 апреля 2019 г. в Angular

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

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

Angular Resolver

Resolver гарантированно получает асинхронные данные до создания компонента исходя из параметров маршрута.