web-dev-qa-db-fra.com

Manière correcte d'importer lodash

J'ai eu un retour de demande d'extraction ci-dessous, je me demandais simplement comment importer correctement lodash.

Vous feriez mieux de faire importer à partir de 'lodash/a' .. Pour la version précédente de lodash (v3) qui, en soi, est assez lourd, nous ne devrions importer que un module/fonction spécifique plutôt que d'importer le lodash entier bibliothèque. Pas sûr de la nouvelle version (v4).

import has from 'lodash/has';

contre

import { has } from 'lodash';

Merci

javascriptlodashbabeljs
117
Bruce

import has from 'lodash/has'; est préférable, car lodash contient toutes ses fonctions dans un seul fichier. Par conséquent, au lieu d'importer la totalité de la bibliothèque 'lodash' à 100 Ko, il est préférable d'importer la fonction has de lodash, qui est peut-être 2k.

166
Bruce

Si vous utilisez Webpack 4, le code suivant est une arborescence shakable.

import { has } from 'lodash-es';

Les points à noter;

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

  2. Le package.json de lodash-es contient "sideEffects": false, ce qui indique au webpack 4 que tous les fichiers qu'il contient ne contiennent aucun effet secondaire (voir https://webpack.js.org/guides/tree-shaking/#mark-the-file-as -side-effect-free ).

  3. Ces informations sont cruciales pour le bouleversement de l’arbre, car les bundlers de modules ne sauvegardent pas les fichiers qui contiennent éventuellement des effets secondaires, même si leurs membres exportés ne sont utilisés nulle part.

Modifier

À partir de la version 1.9.0, Parcel prend également en charge "sideEffects": false , threrefore import { has } from 'lodash-es'; est également une arborescence modulable avec Parcel . Il prend également en charge les modules CommonJS avec agitation des arbres, bien qu'il soit vraisemblable que l'agitation des modules ES est plus efficace que CommonJS selon mon expérience .

32
kimamula

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 & Node.js <4 ne sont pas pris en charge
  • Les séquences en chaîne ne sont pas supportées. Voir ce article de blog pour des alternatives.
  • Modularized method packages ne sont pas supportés
1
Orlando

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 cesser d'en utiliser une autre, il faut la maintenir et la gérer.
0
Nikhil