Правильный способ импорта Лодаш

У меня была обратная связь по запросу, просто интересно, как правильно импортировать lodash?

Вам лучше сделать импорт has from 'lodash / has'. Для более ранней версии lodash (v3), которая сама по себе довольно тяжелая, мы должны импортировать только специальный модуль / функцию, а не импортировать всю библиотеку lodash. Не уверен насчет более новой версии (v4).

import has from 'lodash/has';

против

import { has } from 'lodash';

Спасибо

import has from 'lodash/has';Это лучше, потому что lodash хранит все свои функции в одном файле, поэтому вместо того, чтобы импортировать всю библиотеку 'lodash' на 100 Кб, лучше просто импортировать hasфункцию Лодаша, которая может быть 2 Кб.

Если вы используете webpack 4, следующий код является древовидным.

import { has } from 'lodash-es';

Точки для заметки;

1. Модули CommonJS не могут быть перемещаемыми по дереву, поэтому вы обязательно должны их использовать lodash-es, то есть библиотеку Lodash, экспортируемую как модули ES, а не lodash(CommonJS).

2. lodash-esСодержит package.json "sideEffects": false, который уведомляет webpack 4 о том, что все файлы внутри пакета не имеют побочных эффектов (см. https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side). без эффекта ).

3. Эта информация крайне важна для встряхивания дерева, поскольку упаковщики модулей не удаляют файлы встряхивания дерева, которые могут содержать побочные эффекты, даже если их экспортированные элементы нигде не используются.

редактировать

Начиная с версии 1.9.0, Parcel также поддерживает"sideEffects": false , поэтому import { has } from 'lodash-es';его также можно связать с Parcel. Он также поддерживает расшатывание деревьев модулями CommonJS, хотя, скорее всего, расшатывание дерева модулей ES более эффективно, чем CommonJS, согласно моему эксперименту .

Импорт определенных методов внутри фигурных скобок

import { map, tail, times, uniq } from 'lodash';

Плюсы:

• Только одна строка импорта (для приличного количества функций)
• Более читаемое использование: map () вместо _.map () позже в коде javascript.

Минусы:

• Каждый раз, когда мы хотим использовать новую функцию или перестать использовать другую - ее необходимо поддерживать и управлять

Если вы используете babel, вы должны проверить babel-plugin-lodash , он выберет те части lodash, которые вы используете для себя, меньше хлопот и меньшую связку.

У него есть несколько ограничений :

• Вы должны использовать импорт ES2015 для загрузки Lodash
• Babel <6 & Node.js <4 не поддерживаются
• Последовательности цепочек не поддерживаются. Смотрите этот блог для альтернатив.
• Модульные пакеты методов не поддерживаются

Вы можете импортировать их как

import {concat, filter, orderBy} from 'lodash';

или как

import concat from 'lodash/concat';
import orderBy from 'lodash/orderBy';
import filter from 'lodash/filter';

второй значительно оптимизирован, чем первый, потому что он загружает только необходимые модули

затем используйте как это

pendingArray: concat(
                    orderBy(
                        filter(payload, obj => obj.flag),
                        ['flag'],
                        ['desc'],
                    ),
                    filter(payload, obj => !obj.flag),

Импортировать Lodash в версии 4.17.15

import * as _ from 'lodash';