Get best of the week

Dejar de importar paquetes completos de JavaScript

¿Con qué frecuencia ha importado un paquete JavaScript completo en un proyecto cuando solo necesitaba usar muy pocas características de este paquete? Probablemente podrá recordar muchos de estos casos.

Un ejemplo vívido de un paquete que se importa completamente, que requiere solo algunas de sus funciones, se puede llamar la biblioteca Lodash . Si no ha oído hablar de esta biblioteca, debería echar un vistazo a su documentación. En particular, en el sitio web del proyecto puede descubrir que Lodash simplifica el desarrollo de JavaScript al asumir la tarea de trabajar con matrices, números, objetos y similares.



La biblioteca Lodash incluye más de 200 funciones. Esto sugiere que, de hecho, ella puede ayudar al programador a resolver muchos problemas. Pero puede suceder que al importar toda la biblioteca, solo se llamarán de 4 a 5 funciones. Esto nos lleva a la cuestión de la conveniencia de importar el paquete completo en una situación en la que solo se utilizará el 2-3% de sus capacidades. Pensemos cómo manejar esto.

Lodash obtiene la función


Una de mis características favoritas de la biblioteca Lodash es la característica get. Le permite organizar el acceso seguro a objetos anidados y admite el uso de valores predeterminados.

Aquí hay un ejemplo del uso de esta función:

const _ = require('lodash');

let employee1 = {
  name : "Jon",
  address : {
    street : "North Avenue",
    area : "DAC",
    zip : "87344",
    contact : [ 12444554, 9384847 ]
  },
  designation : "Manager"
};

let employee2 = {
  name : "Jake",
  designation : "Senior Manager"
};

function getHomeContact(employee) {
  return employee.address.contact;
}

getHomeContact(employee1); // [12444554, 9384847]
getHomeContact(employee2); // Uncaught TypeError: Cannot read property 'contact' of undefined

function getHomeContactWithLodash(employee) {
  return  _.get(employee, "address.contact", []);
}

getHomeContactWithLodash(employee1); // [12444554, 9384847]
getHomeContactWithLodash(employee2); // []

El uso de esta función le permite hacer que el código sea mucho más limpio que antes. Esto ayuda a evitar errores debido al hecho de que cuando se espera una matriz vacía, la función no volverá null. Gracias a esta función, no puede, por error, llamar a un método mapen una matriz vacía. Protege de otros problemas.

Echemos un vistazo a cómo la inclusión de la biblioteca Lodash en el proyecto si se planea usar solo la función afectará el tamaño del paquete get. Los experimentos se llevarán a cabo utilizando un proyecto React. El tamaño del paquete se analizará antes de importar la biblioteca y después de varias opciones para conectarlo al proyecto.

Tamaño del proyecto antes de importar la biblioteca


Analizamos el tamaño de los archivos del proyecto antes de importar la biblioteca.


Tamaño del archivo antes de usar Lodash

Ahora veamos las consecuencias de varias formas de importar una biblioteca a un proyecto.

Tamaño del proyecto después de usar diferentes métodos de importación de bibliotecas


▍1. Importación tradicional


Se trata de importar la biblioteca de una de las siguientes formas tradicionales.

El primero:

import _ from ‘lodash’;

Segundo:

const _ = require('lodash');

Así es como afectará el tamaño final de los archivos del proyecto.


Cambiar el tamaño de los archivos del proyecto al importar un paquete completo

▍2. Importación ES6


Aquí, nuevamente, tenemos dos opciones.

El primero:

import { get } from 'lodash';

Segundo:

const { get } = require('lodash');

Echemos un vistazo al efecto de tales importaciones en el tamaño de los archivos del proyecto.


Tamaños de archivo al importar la función get mediante asignación destructiva

Como puede ver, el uso de los dos enfoques anteriores condujo a un aumento en los tamaños de archivo de aproximadamente 23 Kb. Y este es un aumento muy significativo, especialmente teniendo en cuenta que estamos hablando de usar una sola función de la biblioteca, que incluye más de 200 funciones. Como resultado, resulta que el tamaño del paquete aumentó tanto como uno esperaría que aumentara si se usaran todas estas 200 funciones en el proyecto.

¿Quizás 23 Kb no es un precio tan alto por usar la única función necesaria? No, eso es demasiado. 

¿Hay alguna manera de importar solo lo que necesita en un proyecto? Sí, existe tal manera.

Analicemos la carpeta donde se almacenan los materiales de Lodash.

Para hacer esto, solo sigue el camino node_modules/lodash. En esta carpeta puede encontrar muchos archivos en los que se almacena el código de funciones individuales. Entre ellos, es fácil encontrar el archivo get.jsen el que se encuentra el código de la función que nos interesa get. Y esto significa que si solo necesitamos una función, getes suficiente importar solo este archivo al proyecto. Esto nos lleva al tercer método de importación.

▍3. Importar archivo get.js desde Lodash


Aquí, nuevamente, hay dos métodos disponibles.

El primero:

import get from 'lodash/get';

Segundo:

const get = require('lodash/get');

Echa un vistazo a cambiar el tamaño del paquete.


Tamaños de archivo al importar el archivo get.js

Se puede ver que debido al hecho de que solo importamos el archivo al proyectoget.js, pudimos deshacernos de más de 20 Kb de código innecesario que ingresa al paquete al usar otros métodos. Pero estamos hablando de un solo paquete. Un proyecto típico de JavaScript tiene muchas más dependencias. Imagine cómo un enfoque cauteloso para importar paquetes y el control constante del tamaño de los paquetes puede afectar un proyecto de servidor o cliente.

¿Todos los paquetes admiten un enfoque de importación selectiva?


No, no todo. Depende completamente de la organización de los archivos del paquete. Pero, afortunadamente, la mayoría de los paquetes populares bastante grandes están estructurados para que, trabajando con ellos, sea fácil organizar la importación selectiva de sus capacidades individuales.

¿Cómo hacer lo mismo mientras trabaja con otras bibliotecas?


El proceso de eliminar el código no utilizado se conoce como sacudimiento de árbol. Si necesita, por ejemplo, "sacudir el árbol" de la biblioteca Ant Design, busque en Internet las palabras "sacudir el árbol antd". Puede encontrar una discusión sobre este tema en StackOverflow o en GitHub. Después de haber encontrado una discusión de este tipo, revísela, es muy posible que alguien ya haya resuelto la tarea antes que usted.

Otra forma de deshacerse del código innecesario requiere un poco más de esfuerzo. Debe ir a la carpeta del paquete ubicada node_modulesy hacer el análisis de código. En particular, debería estar interesado en la estructura del proyecto y averiguar si está dividido en pequeños módulos que pueden importarse al proyecto independientemente uno del otro.

Ejemplo de optimización de importación usando el paquete antd


Antes de:

import { Menu} from 'antd';

Después:

import Menu from 'antd/es/menu';
import 'antd/es/menu/style/css';

Ejemplo de optimización de importación usando el paquete material-ui


Antes de:

import { Button } from '@material-ui/core';

Después:

import Button from '@material-ui/core/Button';

Ejemplo de optimización de importación usando el paquete de momento


La optimización del momento de importación de la biblioteca parece un poco más complicada. Por lo tanto, si lo necesita, eche un vistazo a la tarea que creé en el rastreador de tareas de esta biblioteca.

Resumen


Usted mismo puede asegurarse de que una gran cantidad de código innecesario entre en sus proyectos. Puede resolver este problema comparando cuidadosamente lo que importa con lo que usa. Esto le permitirá, por ejemplo, reducir el tiempo de carga de sus sitios. Por lo tanto, se recomienda que controle cuidadosamente el tamaño de los paquetes de proyectos y optimice las importaciones de dependencias.

¿Y cómo, en sus proyectos de JavaScript, lucha con la importación de código innecesario?

More articles:


All Articles