javascript - react - lodash npm

Forma correcta de importar lodash

Question

Recibí un comentario de solicitud de extracción a continuación, solo 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 en sí es bastante pesada, solo deberíamos importar un módulo / función específico en lugar de importar toda la biblioteca lodash. No estoy seguro acerca de la versión más reciente (v4).

import has from ''lodash/has'';

vs

import { has } from ''lodash'';

Gracias

Answer 1

Importe métodos específicos dentro de llaves

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

Pros:

• Solo 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, debe mantenerse y administrarse

Answer 2

Si está utilizando babel, debe consultar babel-plugin-lodash , seleccionará las partes de lodash que está utilizando para usted, menos molestias y un paquete más pequeño.

Tiene algunas limitations :

• Debe usar las importaciones de ES2015 para cargar Lodash
• Babel <6 y Node.js <4 no son compatibles
• Las secuencias de cadena no son compatibles. Vea esta publicación de blog para alternativas.
• Los paquetes de métodos modulares no son compatibles.

Answer 3

Si está utilizando webpack 4, el siguiente código puede ser sacudido en árbol.

import { has } from ''lodash-es'';

Los puntos a tener en cuenta;

1. Los módulos CommonJS no se pueden mover en árbol, por lo que definitivamente debe usar lodash-es , que es la biblioteca Lodash exportada como módulos ES, en lugar de lodash (CommonJS).

2. lodash-es contiene "sideEffects": false , que notifica a webpack 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-effect-free ).

3. Esta información es crucial para la agitación de los árboles, ya que los agrupadores de módulos no agitan los archivos de agitación que posiblemente contienen 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 admite "sideEffects": false , por lo tanto, import { has } from ''lodash-es''; También es un árbol que se puede sacudir con Parcela. También es compatible con los módulos CommonJS de sacudidas de árboles, aunque es probable que el temblor de árboles de los módulos ES sea más eficiente que CommonJS según mi experimento .

Answer 4

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 importar lodash has función que es quizás 2k.