Prawidłowy sposób importowania lodash

Miałem poniżej informację zwrotną dotyczącą żądania ściągnięcia, zastanawiam się tylko, który sposób jest prawidłowy sposób importowania lodash?

Lepiej wykonaj import z 'lodash / has'. W przypadku wcześniejszej wersji lodash (v3), która sama w sobie jest dość ciężka, powinniśmy importować tylko określony moduł / funkcję, a nie importować całą bibliotekę lodash. Nie jestem pewien co do nowszej wersji (v4).

import has from 'lodash/has';

vs

import { has } from 'lodash';

Dzięki

import has from 'lodash/has';jest lepsze, ponieważ lodash przechowuje wszystkie swoje funkcje w jednym pliku, więc zamiast importować całą bibliotekę „lodash” na 100k, lepiej po prostu zaimportować hasfunkcję lodash, która może być 2k.

Jeśli używasz webpack 4, poniższy kod można wytrząsać z drzewa.

import { has } from 'lodash-es';

Punkty do odnotowania;

1. Moduły CommonJS nie są wstrząsane drzewem, więc zdecydowanie powinieneś użyć lodash-es, czyli biblioteki Lodash eksportowanej jako ES Modules, a nie lodash(CommonJS).

2. lodash-es„Package.json zawiera” "sideEffects": false, który informuje webpack 4, że wszystkie pliki w pakiecie są wolne od efektów ubocznych (patrz https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side -efektywne ).

3. Informacje te są kluczowe dla wstrząsania drzewem, ponieważ programy pakujące moduły nie wstrząsają plikami, które prawdopodobnie zawierają skutki uboczne, nawet jeśli ich eksportowane elementy nie są nigdzie używane.

Edytować

Począwszy od wersji 1.9.0, Parcel obsługuje również"sideEffects": false , dlatego import { has } from 'lodash-es';też można wstrząsać drzewem za pomocą Parcel. Obsługuje także wstrząsanie drzewami modułów CommonJS, chociaż według mojego eksperymentu wstrząsanie drzewem modułów ES jest bardziej wydajne niż CommonJS .

Zaimportuj określone metody w nawiasach klamrowych

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

Plusy:

• Tylko jeden wiersz importu (dla przyzwoitej liczby funkcji)
• Bardziej czytelne użycie: map () zamiast _.map () później w kodzie javascript.

Cons:

• Za każdym razem, gdy chcemy skorzystać z nowej funkcji lub przestać korzystać z innej - należy ją utrzymywać i zarządzać

Jeśli używasz babel, powinieneś sprawdzić babel-plugin-lodash , to wybierze części lodash, których używasz dla ciebie, mniej kłopotów i mniejszy pakiet.

Ma kilka ograniczeń :

• Aby załadować Lodash, musisz użyć importu ES2015
• Babel <6 i Node.js <4 nie są obsługiwane
• Sekwencje łańcuchowe nie są obsługiwane. Zobacz ten post na blogu, aby znaleźć alternatywy.
• Modularne pakiety metod nie są obsługiwane

Możesz je zaimportować jako

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

lub jako

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

drugi jest znacznie zoptymalizowany niż pierwszy, ponieważ ładuje tylko potrzebne moduły

użyj tego w ten sposób

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

Importuj Lodash w wersji 4.17.15

import * as _ from 'lodash';