Forma correcta de importar lodash
Recibí un comentario sobre la solicitud de extracción a continuación, y me preguntaba cuál es la forma correcta de importar lodash.
Será mejor que importes has desde 'lodash/has'. Para la versión anterior de lodash (v3), que por sí sola es bastante pesada, solo deberíamos importar un módulo/función específico en lugar de importar toda la biblioteca de lodash. No estoy seguro acerca de la versión más nueva (v4).
import has from 'lodash/has';
vs
import { has } from 'lodash';
Gracias
import has from 'lodash/has';
es mejor porque lodash contiene todas sus funciones en un solo archivo, por lo que en lugar de importar toda la biblioteca 'lodash' a 100k, es mejor simplemente importar la has
función de lodash, que tal vez sea 2k.
Si está utilizando webpack 4
, el siguiente código se puede modificar en árbol.
import { has } from 'lodash-es';
Los puntos a tener en cuenta;
Los módulos CommonJS no se pueden modificar en árbol, por lo que definitivamente deberías usar
lodash-es
, que es la biblioteca Lodash exportada como módulos ES, en lugar delodash
(CommonJS).lodash-es
El paquete.json contiene"sideEffects": false
, que notifica al paquete web 4 que todos los archivos dentro del paquete están libres de efectos secundarios (consulte https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side -libre de efectos ).Esta información es crucial para la agitación de árboles, ya que los paquetes de módulos no agitan archivos que posiblemente contengan efectos secundarios, incluso si sus miembros exportados no se utilizan en ningún lugar.
Editar
A partir de la versión 1.9.0, Parcel también es compatible"sideEffects": false
, por lo que import { has } from 'lodash-es';
también se puede modificar el árbol con Parcel. También admite la agitación de árboles de los módulos CommonJS, aunque es probable que la agitación de árboles de los módulos ES sea más eficiente que CommonJS según mi experimento .
Importar métodos específicos dentro de llaves
import { map, tail, times, uniq } from 'lodash';
Ventajas:
- Sólo una línea de importación (para una cantidad decente de funciones)
- Uso más legible: map() en lugar de _.map() más adelante en el código javascript.
Contras:
- Cada vez que queremos usar una nueva función o dejar de usar otra, es necesario mantenerla y administrarla.
Copiado de: La forma correcta de importar bibliotecas Lodash: un artículo de Benchmark escrito por Alexander Chertkov.