f Skip to main content

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.

Punto de entrada de una aplicación generada por @angular/clii

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).

Árbol de dependencias de una aplicación Angular.

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.

Aplicación con diferentes módulos, index.js como punto de entrada.

Resultado del empaquetado con webpack.

Sin embargo, el proceso de tree shaking no puede ser aplicado correctamente con módulos externos que previamente fueron empaquetados:

Módulo UMD “webapp” previamente empaquetado utilizando rollup que exporta dos propiedades: calc y constant.

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.

Módulo “webapp” importado en el punto de entrada de una aplicación.
Resultado del empaquetado utilizando el módulo externo “webapp”.

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.

William de Jesus Santos

Es egresado de la Universidad de Pamplona, programa desde los 14 años y desde el 2018 labora profesionalmente en casas de desarrollo. El enfoque que le ha dado a su carrera ha sido hacia las tecnologías basadas en Javascript.

One Comment

Déjanos tu comentario

Share via
Copy link
Powered by Social Snap