Forma correcta de importar lodash

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

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.

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 .

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

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 limitaciones :

• 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

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),

Importar Lodash en versión 4.17.15

import * as _ from 'lodash';