Bonne façon d'importer lodash

J'ai eu un commentaire de demande de tirage ci-dessous, je me demandais simplement quelle est la bonne façon d'importer lodash?

Vous feriez mieux d'importer à partir de 'lodash / has'. Pour la version antérieure de lodash (v3) qui en elle-même est assez lourde, nous ne devrions importer qu'un module / une fonction spécifique plutôt que d'importer toute la bibliothèque lodash. Pas sûr de la version la plus récente (v4).

import has from 'lodash/has';

contre

import { has } from 'lodash';

Merci

import has from 'lodash/has';est mieux parce que lodash contient toutes ses fonctions dans un seul fichier, donc plutôt que d'importer la bibliothèque entière 'lodash' à 100k, il est préférable d'importer simplement la hasfonction de lodash qui est peut-être 2k.

Si vous utilisez webpack 4, le code suivant est modifiable dans l'arborescence.

import { has } from 'lodash-es';

Les points à noter;

1. Les modules CommonJS ne sont pas transformables en arborescence, vous devez donc absolument utiliser lodash-es, qui est la bibliothèque Lodash exportée en tant que modules ES, plutôt que lodash(CommonJS).

2. lodash-es's package.json contient "sideEffects": false, qui notifie au webpack 4 que tous les fichiers à l'intérieur du package sont sans effet secondaire (voir https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side -sans effet ).

3. Ces informations sont cruciales pour le tremblement de l'arbre car les bundlers de modules ne secouent pas les fichiers qui peuvent contenir des effets secondaires même si leurs membres exportés ne sont utilisés nulle part.

Éditer

À partir de la version 1.9.0, Parcel prend également en charge"sideEffects": false , par conséquent, l'arborescence import { has } from 'lodash-es';peut également être modifiée avec Parcel. Il prend également en charge les modules CommonJS d'arborescence, bien qu'il soit probable que l'arborescence des modules ES soit plus efficace que CommonJS selon mon expérience .

Importer des méthodes spécifiques à l'intérieur des accolades

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

Avantages:

• Une seule ligne d'importation (pour un nombre décent de fonctions)
• Utilisation plus lisible: map () au lieu de _.map () plus tard dans le code javascript.

Les inconvénients:

• Chaque fois que nous voulons utiliser une nouvelle fonction ou arrêter d'en utiliser une autre - elle doit être maintenue et gérée

Si vous utilisez babel, vous devriez vérifier babel-plugin-lodash , il sélectionnera les parties de lodash que vous utilisez pour vous, moins de tracas et un paquet plus petit.

Il a quelques limitations :

• Vous devez utiliser les importations ES2015 pour charger Lodash
• Babel <6 et Node.js <4 ne sont pas pris en charge
• Les séquences de chaîne ne sont pas prises en charge. Consultez ce billet de blog pour des alternatives.
• Les packages de méthodes modulaires ne sont pas pris en charge

Vous pouvez les importer comme

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

ou comme

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

le second est beaucoup plus optimisé que le premier car il ne charge que les modules nécessaires

alors utilisez comme ça

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

Importer Lodash dans la version 4.17.15

import * as _ from 'lodash';