Leí en alguna parte (olvidé la fuente, desafortunadamente), que de alguna manera es más eficiente hacer esto:

import _find from 'lodash/find';

Opuesto a:

import _ from 'lodash'; // just to use _.find

Entiendo cómo podría ser más eficiente importar una sola función, pero ¿dónde está exactamente la ganancia de eficiencia / rendimiento? ¿Está relacionado con el paquete web? Si no estoy usando webpack como mi motor de compilación, ¿importa?

1
ffxsam 1 ene. 2017 a las 22:06
3
Sí, se trata de módulos de menor tamaño. Tanto para las construcciones del lado del cliente como para los tiempos de construcción en general.
 – 
Bergi
1 ene. 2017 a las 22:08
En otras palabras, al compilar para producción, solo incluirá el código lodash para find si lo importo a través del primer método, ¿verdad? ¿Es esto un paquete web o se aplica a ES6 en general?
 – 
ffxsam
1 ene. 2017 a las 22:09
1
Se aplica a los módulos en general, independientemente del sistema de módulos o el paquete de módulos que utilice. Sin embargo, hay paquetes que eliminan el código muerto (innecesario) automáticamente incluso si importa el módulo grande; esto intercambia tamaño de construcción por tiempo de construcción.
 – 
Bergi
1 ene. 2017 a las 22:17
Seguimiento: ¿import _find from 'lodash/find' es lo mismo que import { find as _find } from 'lodash'? ¿O este último todavía extrae todo el código base de lodash?
 – 
ffxsam
2 ene. 2017 a las 01:05
Sí, se supone que debe incluir lodash completo (pero solo hacer que find esté disponible), sin embargo, los paquetes inteligentes como el rollup pretenden evitar eso si el módulo se construye correctamente.
 – 
Bergi
2 ene. 2017 a las 01:13

1 respuesta

La mejor respuesta

Cuando importa una biblioteca grande, importa todo (al menos con la mayoría de los empaquetadores), ya que no hay una forma clara de distinguir lo que es necesario del objeto que importó.

No estoy muy familiarizado con lodash, pero su punto de entrada debería verse así:

module.exports = {
  find: require('./find.js')
  filter: require('./filter.js')
  // rest of the exposed functions
}

Con el segundo estilo de importación, obtuviste todo este objeto, pero solo necesitas 1 función de todo esto.

Entonces si haces esto:

import _ from 'lodash'

Terminará con toda la biblioteca lodash empaquetada en su paquete, mientras que si hace esto:

import find from 'lodash/find'

Solo tendrá find y sus dependencias, lo que dará como resultado un tamaño de paquete considerablemente más pequeño.

2
Balázs Édes 1 ene. 2017 a las 22:30
¿Qué pasa con: importar {find} de 'lodash'
 – 
Ken Fehling
18 abr. 2017 a las 15:33
Si está importando desde un paquete es6, está bien. Si está importando eso desde una biblioteca, por ejemplo: lodash, básicamente todavía tiene que cargar todo primero, por lo que es mejor con la última opción en la respuesta.
 – 
Balázs Édes
18 abr. 2017 a las 17:32