¿Por qué usamos empaquetadores de JavaScript?

¿Por qué usamos empaquetadores de JavaScript?

JavaScript es un lenguaje intérprete y no necesita compilación. Su navegador puede ejecutar el mismo código que escribes. Entonces, ¿por qué usamos empaquetadores de JavaScript?

Menos archivos JS

Históricamente, la cantidad de archivos JS utilizados por un sitio web era crucial debido a la penalización en el rendimiento de tener muchos archivos pequeños. Los navegadores cargaron cada archivo con una solicitud HTTP separada. Cada solicitud necesitaba una conexión entre el navegador y el servidor, y se necesitaba tiempo para establecerla. Gracias a HTTP/2, la cantidad de archivos es un problema mucho menor ahora. Aun así, tener archivos agrupados tiene sentido. Cada solicitud se almacena en caché por separado, por lo que tener muchos archivos hace que sea más difícil garantizar que el navegador no obtenga código obsoleto del caché.

Además de eso, hasta 2018, muchos navegadores no admitían módulos ES. Simplemente estaba cargando muchos archivos desde el HTML, y todos compartían el mismo alcance global. Los paquetes de JS abordan ambos problemas, ya que

  • te permite mantener tu código base en muchos archivos bien definidos y
  • agrupar el código en archivos grandes para su implementación.

Image description

Fácil importación desde node_modules

Los paquetes te brindan una forma de importar dependencias, que es mucho mejor que cargarlos como módulos ES. Para usar paquetes de node desde el navegador, necesitarías

  • implementar node_modules en su servidor de producción, y
  • use una ruta relativa desde tuarchivo al archivo que desea importar La ruta relativa es un gran dolor de cabeza porque te obliga a escribir la importación de forma ligeramente diferente dependiendo de qué tan profundo estés en la estructura de carpetas. Entonces, para usar Lodash, tendrías que:
// en ./src/core.js 
var _ = require('../node_modules/lodash/lodash.js');

// en ./src/app/main.js
var _ = require('../../node_modules/lodash/lodash.js');

Los empaquetadores te permiten escribir simplemente:

// en cualquier lugar
var _ = require('lodash');

Image description

Importar otros tipos de archivos

Tu código base no es solo JavaScript. Cuando organices tu código por componentes o rutas, cada uno vendrá con su propia plantilla y estilo. Los módulos nativos de ES no le permiten importar tipos de recursos que no sean JS. Esta limitación le haría importar el CSS del HTML, mientras que el resto del componente se importa en JavaScript —lo que le obligaría a mantener sincronizados dos archivos no relacionados. Los paquetes JS solucionan este problema al permitirle administrar todas esas dependencias directamente desde sus archivos JS:

import ‘./core.js’;
import ‘./style.css’;

const template = require(‘./view.html’);

Image description

Transpilar código

Una gran cantidad de JavaScript no es JavaScript simple; está escrito en lenguajes como TypeScript y luego compilado en JavaScript. Esta compilación de código a código se llama transpilación. La mayor parte del JavaScript se transpila por varias razones.

Minificación de código

Si estás escribiendo tu código como deberías, estás haciendo lo siguiente:

  • dar nombres significativos a las variables
  • sangrado del código
  • dejando comentarios para otros desarrolladores

Esto agrega desorden que no significa nada para el intérprete. La minificación es el primer paso para reducir el tamaño de la carga útil. Elimina todo lo que no tiene impacto en su aplicación.

Image description

Versión anterior para navegadores más antiguos

A medida que el lenguaje recibe nuevas características, existe este período durante el cual

  • los desarrolladores ya quieren usarlo, y
  • no todos los navegadores lo admiten.

Afortunadamente, este período se está acortando significativamente gracias a los evergreen browsers, pero aún existe la necesidad de un proyecto como Babel. Babel te permite usar la versión de idioma más reciente mientras codifica y transpilarla a una versión que entenderá el navegador anterior.

Sabores de JavaScript

Además del JavaScript simple, puede usar muchos de sus sabores:

  • TypeScript
  • PureScript
  • Elm
  • CoffeeScript

Los paquetes de JavaScript pueden manejar incluso la mezcla de diferentes sabores en un proyecto —lo que parece una mala idea hasta que terminas trabajando con código heredado y necesitas mucha flexibilidad para elegir las prioridades correctas.

Image description

Construcción separada para diferentes casos de uso

Una vez que comienzas a compilar tu código con un paquete, surgen nuevas posibilidades. Desde el principio, lo más probable es que compiles el código de una forma para la producción y de otra para el desarrollo local. Si escribes pruebas unitarias, tal vez te interese saber qué tan bien cubren tu código. Hay herramientas de cobertura de código que hacen exactamente esto. Requieren una compilación dedicada que incluya herramientas que cuenten las visitas a cada línea de código durante la ejecución de la prueba.

¿Y tú?

¿Qué paquete JS planeasusar en tu próximo proyecto? Házmelo saber en la encuesta, para saber a cuál debería prestar más atención en este blog:

¿Qué sigue?

Puedesconsultar mi artículo sobre el uso de módulos ES nativos, o: