Maneira correta de importar lodash

Eu tive um feedback de solicitação de recebimento abaixo, apenas imaginando qual é a maneira correta de importar o lodash?

É melhor importar o has do 'lodash / has'. Para a versão anterior do lodash (v3), que por si só é bastante pesada, devemos importar apenas um módulo / função especídica em vez de importar toda a biblioteca do lodash. Não tenho certeza sobre a versão mais recente (v4).

import has from 'lodash/has';

vs

import { has } from 'lodash';

obrigado

import has from 'lodash/has';é melhor porque o lodash mantém todas as suas funções em um único arquivo; portanto, em vez de importar toda a biblioteca 'lodash' a 100k, é melhor importar apenas a hasfunção do lodash, que talvez seja 2k.

Se você estiver usando webpack 4, o código a seguir é trêmulo.

import { has } from 'lodash-es';

Os pontos a serem observados;

1. Os módulos CommonJS não podem ser alterados em árvore, portanto você deve usar definitivamente lodash-es, que é a biblioteca Lodash exportada como Módulos ES, em vez de lodash(CommonJS).

2. lodash-escontém package.json "sideEffects": false, que notifica o webpack 4 de que todos os arquivos dentro do pacote são livres de efeitos colaterais (consulte https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side sem efeitos ).

3. Essas informações são cruciais para agitar a árvore, pois os agrupadores de módulos não armazenam arquivos de agitação na árvore que possivelmente contêm efeitos colaterais, mesmo que seus membros exportados não sejam usados ​​em nenhum lugar.

Editar

A partir da versão 1.9.0, o Parcel também suporta"sideEffects": false , portanto, import { has } from 'lodash-es';também é instável em árvore com o Parcel. Ele também suporta módulos CommonJS de agitação de árvore, embora seja provável que a agitação de árvore dos Módulos ES seja mais eficiente que o CommonJS, de acordo com meu experimento .

Importar métodos específicos dentro de colchetes

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

Prós:

• Apenas uma linha de importação (para uma quantidade decente de funções)
• Uso mais legível: map () em vez de _.map () posteriormente no código javascript.

Contras:

• Toda vez que queremos usar uma nova função ou parar de usar outra - ela precisa ser mantida e gerenciada

Se você estiver usando o babel, verifique o babel-plugin-lodash , ele selecionará as partes do lodash que você está usando para você, menos problemas e um pacote menor.

Tem algumas limitações :

• Você deve usar as importações do ES2015 para carregar o Lodash
• Babel <6 & Node.js <4 não são suportados
• Sequências em cadeia não são suportadas. Veja esta postagem no blog para alternativas.
• Pacotes de métodos modularizados não são suportados

Você pode importá-los como

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

ou como

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

o segundo é muito otimizado que o primeiro porque carrega apenas os módulos necessários

então use assim

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

Importar Lodash na versão 4.17.15

import * as _ from 'lodash';