Modo corretto di importare lodash

Di seguito ho ricevuto un feedback sulla richiesta pull, chiedendomi in che modo è il modo corretto di importare lodash?

Faresti meglio a importare da 'lodash / has' .. Per la versione precedente di lodash (v3) che di per sé è piuttosto pesante, dovremmo importare solo un modulo / una funzione specifica invece di importare l'intera libreria lodash. Non sono sicuro della versione più recente (v4).

import has from 'lodash/has';

vs

import { has } from 'lodash';

Grazie

import has from 'lodash/has';è meglio perché lodash contiene tutte le sue funzioni in un singolo file, quindi piuttosto che importare l'intera libreria 'lodash' a 100k, è meglio importare solo la hasfunzione di lodash che è forse 2k.

Se si sta utilizzando webpack 4, il seguente codice è shakable dell'albero.

import { has } from 'lodash-es';

I punti da notare;

1. I moduli CommonJS non sono agitabili ad albero, quindi dovresti assolutamente usare lodash-es, che è la libreria Lodash esportata come moduli ES, piuttosto che lodash(CommonJS).

2. lodash-es'package.json contiene "sideEffects": false, che notifica al webpack 4 che tutti i file all'interno del pacchetto sono privi di effetti collaterali (vedi https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side senza effetti ).

3. Queste informazioni sono cruciali per lo scuotimento degli alberi poiché i bundler di moduli non contengono file di scuotimento degli alberi che probabilmente contengono effetti collaterali anche se i loro membri esportati non vengono utilizzati in alcun luogo.

modificare

A partire dalla versione 1.9.0, Parcel supporta anche"sideEffects": false , quindi import { has } from 'lodash-es';è anche agitabile con Parcel. Supporta anche i moduli CommonJS di agitazione degli alberi, sebbene sia probabile che l'agitazione degli alberi dei moduli ES sia più efficiente di CommonJS secondo il mio esperimento .

Importa metodi specifici all'interno di parentesi graffe

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

Professionisti:

• Solo una riga di importazione (per un discreto numero di funzioni)
• Utilizzo più leggibile: map () anziché _.map () più avanti nel codice javascript.

Contro:

• Ogni volta che vogliamo usare una nuova funzione o smettere di usarne un'altra, deve essere mantenuta e gestita

Se stai usando babel, dovresti dare un'occhiata a babel-plugin-lodash , sceglierà le parti di lodash che stai usando per te, meno problemi e un pacchetto più piccolo.

Ha alcune limitazioni :

• È necessario utilizzare le importazioni ES2015 per caricare Lodash
• Babel <6 & Node.js <4 non sono supportati
• Le sequenze di catene non sono supportate. Vedi questo post sul blog per alternative.
• I pacchetti di metodi modulari non sono supportati

Puoi importarli come

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

o come

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

il secondo è molto ottimizzato rispetto al primo perché carica solo i moduli necessari

quindi utilizzare in questo modo

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

Importa Lodash nella versione 4.17.15

import * as _ from 'lodash';