javascript - ¿Está utilizando una importación ES6 para cargar nombres específicos más rápido que importar un espacio de nombres?

ecmascript-6 bundling-and-minification

Question

He encontrado al menos dos formas de importar funciones desde un módulo como Ramda, por ejemplo. Probablemente hay algunas formas más de hacer algo muy similar, como const R = require(''ramda'');

La opción 1 es importar ciertas funciones:

import { cond, T, always, curry, compose } from ''ramda'';

La opción 2 es importar todo el módulo como:

import * as R from "ramda";

Preferiría hacer referencia al módulo desde el que se llama la función de esta manera:

R.T();

Pero si se usa la segunda opción, ¿incorpora todas las funciones de Ramda, no solo las que se usan en un módulo en el que estoy trabajando? ¿Hay algún impacto en el uso real de la memoria o el uso del ancho de banda en cuanto a lo que se envía al navegador si se usa la opción 2? ¿Es posible de alguna manera hacer esto?

// invalid syntax below:
import R { cond, T, always, curry, compose } from ''ramda'';
R.T();

Mi pregunta está un poco relacionada con esta, pero es un poco diferente importar R (ramda) en el archivo .ts de mecanografiado

Answer 1

@Bergi tiene razón en su comentario, que creo que debería ser la respuesta. También me gustaría señalar que siempre puedes probar cosas en Babel para ver en qué se compila: haz clic aquí para ver qué hace realmente un ejemplo de desestructuración

Básicamente, incluso si desestructura una sola función del módulo, se requerirá todo el módulo. En el ejemplo de Babel que di, acabo de extraer Component del módulo ''reaccionar'', pero el código compilado en realidad solo requería todo. :)

Answer 2

TL; DR : No importa.

import * as … from ''ramda'';
import { … } from ''ramda'';

ambos, por defecto, siempre traerán el módulo Ramda completo con todas sus dependencias. Se ejecutaría todo el código dentro del módulo y no importa qué sintaxis se utilizó para hacer referencia a los enlaces exportados. Si utiliza importaciones con nombre o con espacio de nombres, todo se reduce a preferencia.

Lo que puede reducir el tamaño del archivo a descargar y la memoria utilizada es el análisis estático. Después de haber evaluado el módulo, el motor puede recolectar basura esos enlaces a los que se hace referencia desde ninguna parte. Los objetos del espacio de nombres del módulo pueden hacer esto un poco más difícil, ya que cualquier persona con acceso al objeto puede acceder a todas las exportaciones. Pero aún así, esos objetos se especifican de una manera (como inmutable) para permitir el análisis estático de su uso y si lo único que está haciendo con ellos es el acceso a la propiedad con nombres constantes, se espera que los motores utilicen este hecho.

Cualquier optimización de tamaño implica adivinar qué partes del módulo deben evaluarse y cuáles no, y sucede en su paquete de módulos (como Rollup o WebPack ). Esto se conoce como Tree Shaking , que elimina partes del código y dependencias completas cuando no es necesario (utilizado por cualquier cosa que se haya importado). Debería ser capaz de detectar qué importaciones está utilizando independientemente del estilo de importación, aunque podría tener que rescatar al hacer cosas inusuales con el objeto de espacio de nombres (como hacer un bucle o usar el acceso a propiedades dinámicas).

Para conocer las conjeturas exactas que puede hacer su bundler, comuníquese con su documentación.