Richtiger Weg, um lodash zu importieren

Ich hatte unten ein Pull-Request-Feedback und fragte mich nur, wie ich Lodash richtig importieren kann.

Sie sollten has aus 'lodash / has' importieren. Für die frühere Version von lodash (v3), die an sich ziemlich schwer ist, sollten wir nur ein bestimmtes Modul / eine bestimmte Funktion importieren, anstatt die gesamte lodash-Bibliothek zu importieren. Ich bin mir nicht sicher über die neuere Version (v4).

import has from 'lodash/has';

vs.

import { has } from 'lodash';

Vielen Dank

import has from 'lodash/has';ist besser, weil lodash alle seine Funktionen in einer einzigen Datei enthält. Anstatt die gesamte 'lodash'-Bibliothek mit 100.000 zu importieren, ist es besser, nur die hasFunktion von lodash zu importieren, die vielleicht 2.000 beträgt.

Wenn Sie verwenden webpack 4, ist der folgende Code baumschüttelnd.

import { has } from 'lodash-es';

Die zu beachtenden Punkte;

1. CommonJS-Module sind nicht baumschüttelbar, daher sollten Sie auf jeden Fall lodash-esdie als ES-Module exportierte Lodash-Bibliothek anstelle von lodash(CommonJS) verwenden.

2. lodash-es's package.json enthält "sideEffects": false, das Webpack 4 darüber informiert, dass alle Dateien im Paket nebenwirkungsfrei sind (siehe https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side -effektfrei ).

3. Diese Informationen sind für das Baumschütteln von entscheidender Bedeutung, da Modulbündler keine Baumschütteldateien verwenden, die möglicherweise Nebenwirkungen enthalten, selbst wenn ihre exportierten Mitglieder nirgendwo verwendet werden.

Bearbeiten

Ab Version 1.9.0 unterstützt Parcel auch"sideEffects": false , daher import { has } from 'lodash-es';kann mit Parcel auch ein Baum geschüttelt werden. Es unterstützt auch das Baumschütteln von CommonJS-Modulen, obwohl es laut meinem Experiment wahrscheinlich ist, dass das Baumschütteln von ES-Modulen effizienter ist als CommonJS .

Importieren Sie bestimmte Methoden in geschweifte Klammern

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

Vorteile:

• Nur eine Importzeile (für eine anständige Anzahl von Funktionen)
• Besser lesbare Verwendung: map () anstelle von _.map () später im Javascript-Code.

Nachteile:

• Jedes Mal, wenn wir eine neue Funktion verwenden oder eine andere nicht mehr verwenden möchten, muss sie gewartet und verwaltet werden

Wenn Sie babel verwenden, sollten Sie sich babel-plugin-lodash ansehen . Es wird die Teile von lodash auswählen, die Sie für Sie verwenden, weniger Aufwand und ein kleineres Bündel.

Es gibt einige Einschränkungen :

• Sie müssen ES2015-Importe verwenden, um Lodash zu laden
• Babel <6 & Node.js <4 werden nicht unterstützt
• Kettensequenzen werden nicht unterstützt. In diesem Blogbeitrag finden Sie Alternativen.
• Modularisierte Methodenpakete werden nicht unterstützt

Sie können sie als importieren

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

oder als

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

Das zweite ist viel optimierter als das erste, da nur die benötigten Module geladen werden

dann benutze so

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