it-swarm.com.de

Der richtige Weg, um lodash zu importieren

Ich hatte unten ein Pull-Request-Feedback. Ich frage mich nur, auf welche Art und Weise der Import von lodash korrekt ist.

Sie sollten importieren von 'lodash/has' haben. Für die frühere Version Von lodash (v3), das an sich ziemlich schwer ist, sollten wir nur .__ importieren. ein spezidisches Modul/eine spezifische Funktion, anstatt das gesamte Modul zu importieren Bibliothek. Nicht sicher über die neuere Version (v4).

import has from 'lodash/has';

vs

import { has } from 'lodash';

Vielen Dank

117
Bruce

import has from 'lodash/has'; ist besser, da lodash alle Funktionen in einer einzigen Datei enthält. Statt die gesamte 'lodash'-Bibliothek bei 100.000 zu importieren, ist es besser, die has-Funktion von lodash zu importieren, die möglicherweise 2k ist.

166
Bruce

Wenn Sie Webpack 4 verwenden, ist der folgende Code baumstrukturierbar.

import { has } from 'lodash-es';

Die zu beachtenden Punkte;

  1. CommonJS-Module können nicht in einer Baumstruktur verschoben werden. Sie sollten daher unbedingt lodash-es verwenden. Hierbei handelt es sich um die Lodash-Bibliothek, die als ES-Module exportiert wird, anstelle von lodash (CommonJS).

  2. lodash-ess package.json enthält "sideEffects": false, mit dem Webpack 4 darüber informiert wird, dass alle Dateien innerhalb des Pakets nebenwirkungsfrei sind (siehe https://webpack.js.org/guides/tree-shaking/#mark-the-file-as) -nebeneffektfrei ).

  3. Diese Informationen sind für das Tree-Shake von entscheidender Bedeutung, da Modul-Bundler keine Tree-Shake-Dateien erstellen, die möglicherweise Nebenwirkungen enthalten, auch wenn ihre exportierten Member nirgendwo verwendet werden.

Bearbeiten

Ab Version 1.9.0 unterstützt Parcel auch "sideEffects": false , daher ist import { has } from 'lodash-es'; auch mit Parcel ..__ baumstrukturierbar. Es unterstützt auch Baum-Shaking-CommonJS-Module, obwohl Baumschütteln von ES-Modulen wahrscheinlich effizienter ist als CommonJS nach meinem experiment .

32
kimamula

Wenn Sie babel verwenden, sollten Sie babel-plugin-lodash auschecken. Es werden die Teile von lodash, die Sie für Sie verwenden, aus der Liste gepflückt, weniger Aufwand und ein kleineres Bündel.

Es hat ein paar Einschränkungen :

  • Sie müssen ES2015-Importe verwenden, um Lodash zu laden
  • Babel <6 und Node.js <4 werden nicht unterstützt
  • Kettensequenzen werden nicht unterstützt. Siehe diesen Blog-Beitrag für Alternativen.
  • Modularisierte method-Pakete werden nicht unterstützt
1
Orlando

Importieren Sie spezifische Methoden in geschweiften Klammern

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

Pros:

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

Nachteile:

  • Jedes Mal, wenn wir eine neue Funktion verwenden möchten oder auf eine andere verzichten möchten, muss diese gepflegt und verwaltet werden
0
Nikhil