Forma correcta de importar lodash


185

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 por sí misma 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


44
Vea esta respuesta para una discusión más profunda de por qué este último aún puede incurrir en una optimización del rendimiento en algunos entornos como Webpack. Se debe al uso de análisis estático y sacudidas de árboles.
Patrick Roberts

Respuestas:


244

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 la hasfunción de lodash, que es quizás 2k.


1
@GeorgeKatsanos solo importa la función que desea usar, no necesita '_'
Bill

55
@GeorgeKatsanos 'lodash/has'no es un paquete separado. Hay un archivo llamado has.jsen la raíz del 'lodash'paquete normal y import has from 'lodash/has'(o const has = require ('lodash/has) cargará ese archivo. No son paquetes de métodos por separado sobre la NGP, pero utilizan la "sintaxis con punto": 'lodash.has'. Esta también sería una forma válida de hacerlo si no te importa instalar un paquete separado para cada método que utilizas (y potencialmente hacer que sea package.jsonmasivo como resultado).
daemonexmachina

80
Tengo que agregar aquí que, si usa webpack 2 o rollup (un paquete que admite el movimiento de los árboles), entonces import { has } from 'lodash'funcionaría de la misma manera, ya que el resto se eliminará
Alex JM

1
@PDN webpack 2 tree shaking debería hacerlo automáticamente
Bill

23
a diferencia de otros, mi sacudida de árbol no funcionaría con la sintaxis más obvia, fue solo después de que cambié a lodash-es y usé la import has from 'lodash-es/has'sintaxis que obtuve la sacudida completa del árbol. pasó de 526 KB a 184 KB, consulte stackoverflow.com/questions/41991178/…
Brandon Søren Culley el

86

Si está utilizando webpack 4, el siguiente código es árbol shakable.

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'package.json 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 sin efectos ).

  3. Esta información es crucial para la sacudida de los árboles, ya que los agrupadores de módulos no incluyen archivos de sacudidas de árboles que posiblemente contengan efectos secundarios, incluso si sus miembros exportados no se usan en ningún lado.

Editar

A partir de la versión 1.9.0, Parcel también es compatible"sideEffects": false , por lo tanto, import { has } from 'lodash-es';también se puede mover en árbol con Parcel. También es compatible con los módulos CommonJS de sacudidas de árboles, aunque es probable que la sacudida de árboles de los módulos ES sea más eficiente que CommonJS según mi experimento .


Convertí todas mis importaciones lodash a import { ... } from 'lodash-es'; Mi paquete todavía incluye toda la biblioteca.
Isaac Pak

@IsaacPak Asegúrese de que no está transpirando módulos ES a CommonJS. Si está utilizando TypeScript, debe establecer la --moduleopción del compilador como es6, es2015o esnext.
kimamula

No estoy usando TypeScript y mi .babelrc env preestablecido está configurado para modules: falseque no se transpile a CommonJS. Estoy usando la solución de Bruce ahora que parece funcionar. Gracias por su contribución, estoy seguro de que funciona, pero simplemente no tengo la configuración para ello.
Isaac Pak

desafortunadamente, no puedo usar lodash-es con broma en este momento: github.com/facebook/jest/issues/4842#issuecomment-491434065
apollo

1
import has from 'lodash-es/has'y import {has} from 'lodash-es'ambas variantes hacen sacudidas de árboles cuando se usanwebpack-4
Leyendas

9

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

Gracias por la útil respuesta. Sin embargo, me gusta que la _.map()sintaxis sea clara de que se está utilizando una biblioteca externa. ¿Es import _ from 'lodash'tan eficiente como su sugerencia o hay otra forma de poder usar esta sintaxis?
Toivo Säwén

1
@ ToivoSäwén Estoy completamente de acuerdo y también prefiero la _.map()sintaxis explícita . ¿Pudiste encontrar una manera de mantener eso mientras haces importaciones de es6 y sacudes los árboles?
Raj


4

Puedes importarlos como

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

o como

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

el segundo está mucho más optimizado que el primero porque solo carga los módulos necesarios

luego usa así

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

1

Importar Lodash en versión 4.17.15

import * as _ from 'lodash';
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.