JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

TRUCO: Hacer "bundling" de archivos JavaScript o CSS sin necesidad de herramientas externas

Este es un truco rápido pero muy útil para programadores Front-End que trabajan con HTML, CSS y JavaScript.

Como todo el mundo sabe (o debería saber), con HTTP 1.1 cada petición que se envía al servidor añade "peso" a la carga total de la página porque se debe abrir una nueva conexión, se deben enviar las cabeceras y recibirlas, hay un máximo de conexiones abiertas a la vez, etc...

Por ello, si la página incluye por ejemplo 10 archivos .css que en conjunto pesan 250KB, su descarga va a tardar más que si descargásemos ese mismo contenido exactamente, con el mismo peso, pero en un solo archivo .css.

Esto no ocurre con la nueva versión HTTP 2, pero no siempre está disponible todavía.

Como en una aplicación o en una página web cada milisegundo cuenta, se suelen utilizar dos técnicas habitualmente para disminuir el efecto de tener varios archivos y disminuir su peso:

  • "Bundling" o empaquetamiento: consiste en combinar varios archivos dentro de uno solo para que, aunque ocupen lo mismo, puedan descargarse con una sola conexión de una sola vez, con lo que se ahorra tiempo total de descarga y procesamiento. Lo verás más a menudo como "bundling" que es el término que se usa en inglés (y casi todo el mundo en español).
  • "Minificación" o minimización: se trata de reducir al máximo el tamaño de los archivos quitando todo lo que no es necesario: espacios en blanco, tabuladores, cambios de línea... Generalmente puede ir acompañado además de ofuscación del código para dificultar su seguimiento. El primer término "minificación" es incorrecto en español, pero se utiliza mucho porque es como se le llama en inglés (minification).

Existen multitud de herramientas que se pueden encargar de llevar a cabo estas tareas antes de pasar un proyecto a producción (siendo Grunt y Gulp los programadores de tareas más conocidos: ambos tienen plugins para hacer esto).

Sin embargo lo que muchos no saben es que en el propio sistema operativo Windows tenemos una herramienta muy simple que nos permite hacer "bundling" instantáneamente sin necesidad de instalar nada más.

Se trata del comando "copy" de la línea de comandos toda la vida. Una de sus particularidades que permite "mezclar" archivos si especificamos varios archivos de origen y un solo archivo de destino. De hecho podemos especificar los archivos uno a uno o bien usando comodines.

Así, por ejemplo, si tenemos una carpeta "js" en nuestro proyecto donde tenemos todos los scripts de la aplicación web, podemos crear un "bundle" con todos ellos en otro archivo llamado, por ejemplo, "miApp.js" escribiendo algo como esto desde la carpeta raíz del proyecto:

Bundling

Nota: puedes abrir una línea de comandos directamente en la carpeta que te interese, pulsando mayúsculas al mismo tiempo que pulsas el botón derecho del ratón sobre dicha carpeta en el explorador de archivos. Verás que en el menú contextual aparece una nueva opción que es "Abrir línea de comandos aquí".

En el ejemplo se combinan todos los archivos con extensión .js en un nuevo archivo llamado "miApp.js" que tiene el contenido de todos los demás. Justo lo que queríamos.

Podríamos usar el signo "+" para combinar archivos concretos si queremos tener más control, escribiendo por ejemplo:

Bundling-2

En este caso combinamos los archivos llamados "1.js" y "2.js" en un nuevo archivo con el nombre "miApp.js". Se pueden encadenar tantos como queramos con el "+".

Un par de comentarios:

  1. Se usa el modificador "/b" al llamar al comando COPY porque, aunque por defecto el comando considera los archivos como textos, los considera textos en formato ASCII. HOy en día la mayor parte de los archivos de texto están codificados como UTF-8, por lo que usándolo sin el modificador hace que aparezcan caracteres "raros". Poniéndole el "/b" hace que trate a los archivos como archivos binarios, es decir, los leerá byte a byte sin interpretarlos en modo alguno, que es justo lo que queremos.
  2. Si vas a usar esta técnica te recomiendo que comiences todos los archivos con una nueva línea (en blanco). Esto hará que cuando se concatenen no se "toquen" la última línea de cada archivo con la primera del siguiente.
  3. Si usas el comodín "*" hará el bundling usando el orden que tengan los archivos en el sistema de archivos. Si necesitas que el orden sea uno determinado (por prioridades de CSS o declaraciones de funciones JavaScript) entonces usa mejor la segunda variante con el "+" y especifica los nombres.
  4. Puedes crear un archivo .bat con el comando y lanzarlo rápidamente con un doble-clic cada vez que lo necesites.

¡Espero que te sea útil!

José Manuel Alarcón José Manuel Alarcón
Fundador y director de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (1) -

Excelente aporte, muchas gracias

Responder

Agregar comentario