La forma en cómo escribimos el código que correrá en los navegadores ha cambiado desde hace ya varios años. Los nuevos estándares de Javascript y la modularización de código han permitido crear aplicaciones que su mantenibilidad sea casi pan comido. Herramientas como @angular/cli, create-react-app o @vue/cli nos permiten construir aplicaciones para sus frameworks/librerías respectivas (Angular, React y Vue) y que con solo un comando podamos obtener archivos listos y optimizados para ser servidos estáticamente.
Pero… Alguna vez te has preguntado, ¿cómo es que mi aplicación acaba en solo 2 o 3 archivos Javascript donde su código no es inteligible por el ser humano? No te preocupes, esta serie de Ceibablogs buscarán que comprendas qué sucede detrás de la magia.
DISCLAIMER: Los ejemplos que utilizaremos en esta serie de blogs están construidos utilizando webpack y rollup, no se garantiza resultados idénticos con otros empaquetadores.
Un empaquetador necesita en esencia, un módulo Javascript que le sirva como su punto de entrada a toda la aplicación.
El empaquetador comenzará a crear un árbol de dependencias con los módulos que se importan desde el punto de entrada, así como los módulos que se comparten entre diferentes nodos del árbol siguiendo la estrategia de resolución de módulos estándar de Javascript (ver más).
El empaquetador solo lee y procesa los módulos que encuentra dentro del árbol, los demás son excluidos (módulos instalados o ubicados localmente pero no usados). Algunos empaquetadores son capaces de utilizar solo la propiedad importada, excluyendo el resto de propiedades e incluso tienen la capacidad de evaluar el código. A esto se le conoce como tree shaking, reduciendo así la cantidad de nodos y propiedades a empaquetar.
Sin embargo, el proceso de tree shaking no puede ser aplicado correctamente con módulos externos que previamente fueron empaquetados:
Al momento de importar el módulo “webapp” en nuestra aplicación, el tree shaking no puede ser aplicado correctamente, ya que es un módulo externo empaquetado.
Como se puede apreciar, aunque el punto de entrada solo utiliza la propiedad constant, la propiedad calc también es incluida. Es por ello que se debe cuidar la forma en cómo se importan los módulos externos.
Un ejemplo práctico de esto serían los Componentes de material-ui de React. Para importar el componente Button se puede realizar de dos maneras:
O
La primera forma de importar, aunque solo se vaya a utilizar el componente Button, durante el proceso de empaquetado se incluiría todo el conjunto de Componentes y utilidades que realmente no vamos a necesitar. Por el contrario, la segunda forma importa e incluye en el empaquetado únicamente el componente que se necesita, evitando así empaquetados pesados y con bajo rendimiento.
Cabe destacar que, la construcción de librerías que tengan la habilidad de exportar módulos independientes y/o exportarlos como un todo (un bundle.js general que incluye todos los módulos) no es una tarea sencilla. El empaquetador por excelencia para este tipo de proyectos es rollup.
Aquí termina nuestra primera parte sobre empaquetadores, en el siguiente blog ampliaremos el uso de módulos con importación de archivos (imágenes, estilos y fuentes) dentro de módulos javascript y cómo montar automáticamente el empaquetado en un archivo html.
Excelente articulo gracias!