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.

SIGUE LEYENDO para averiguar cómo hacerlo y como evitar posibles problemas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *