En este artículo vamos a hablar de una herramienta importante para el desarrollo de Web Components. Básicamente permite optimizar un proyecto para su publicación en Internet, de modo que un sitio web basado en componentes tenga mayor desempeño.

Es una herramienta construida con NodeJS por el equipo de Polymer, aunque la podrías usar para cualquier proyecto que use Web Components. El repositorio en Github de Vulcanize lo encuentras en: https://github.com/Polymer/vulcanize

Es muy fácil de utilizar, como veremos a continuación. Pero antes de comenzar vamos a explicar el motivo de la existencia de estas herramientas de producción.

El problema del HTTP

A la hora de desplegar un proyecto web en general, y no solo aquellos realizados con Polymer, deberíamos evitar en la medida de lo posible reducir la cantidad de archivos solicitados al servidor.

Esto es clave en el desarrollo con Polymer (y extensible a cualquier otra fórmula de desarrollo basado en Web Components) puesto que generas decenas, o centenas, de archivos con código para cada uno de los elementos de una aplicación. A la hora de desarrollar nos viene muy cómodo tener los componentes separados por ficheros, porque así sabremos dónde está cada cosa, pero a la hora de publicar el proyecto ya no es una situación deseable.

Aquí es donde entra el denominado proceso de vulcanizado, que básicamente es unir todos los archivos de los componentes en un único archivo con todo el código. Obviamente no lo haces a mano, sino con una herramienta llamada "Vulcanize"

Instalación de Vulcanize

La herramienta se instala mediante npm, siendo una recomendación instalarla de manera global. Usamos el comando:

npm install -g vulcanize

Usando Vulcanize

Posteriormente podremos usar la herramienta mediante el comando "vulcanize". Básicamente le tenemos que indicar un punto de entrada y un archivo de salida.

vulcanize index.html > elementos.html

El vulcanizado de elementos recorrerá los archivos importados que haya en el archivo de entrada indicado (en ese caso el "index.html") y los irá uniendo. Escribirá el resultado de su concatenación en el archivo de salida indicado (en este caso "elementos.html").

Además existen varias opciones que permiten personalizar el funcionamiento del vulcanizado. Una muy útil es la posibilidad de indicarle una ruta. Esto es importante porque a veces el proceso de despliegue de la aplicación incluye un cambio de estructura de carpetas.

vulcanize -p "app" index.html > dist/elements/elements.html

Esto irá a buscar el archivo de origen "index.html" a "app/index.html" y el archivo vulcanizado lo dejará en la ruta "dist/elements/elements.html".

Esta opción es importante porque a veces los componentes tienen archivos "assets", como imágenes que no queremos que se rompan. Las rutas de todos estos archivos las colocará absolutas a la raíz del web server, teniendo en cuenta que "app" sería esa raíz (dado el anterior comando).

Unión pero no minimización

Cabe señalar que el proceso de vulcanizado permite la unión de los archivos de los componentes, pero no la minimización del código, o compactado. Eso se tendría que hacer con otras herramientas Node.

Lo que sí tiene es una opción para quitar comentarios, que elimina todos menos aquellos que comienzan por @license.

vulcanize --strip-comments origen.html

Vulcanize en Polymer Starter Kit

Si estamos usando Polymer Starter Kit como inicio de nuestra aplicación ya está incluida la herramienta de vulcanizado de manera predeterminada. En el proceso de despliegue del proyecto se incluye su invocación, por lo que no tendríamos que preocuparnos por este detalle.

Como ya comentamos en el artículo del Polymer Starter Kit al lanzar el comando "gulp" se desatan todas las tareas para el despliegue del proyecto, con todas las herramientas frontend orquestadas por Gulp, entre las que se incluye el propio sistema de vulcanizado.

Después de lanzar ese proceso, verás que en la carpeta "dist/elements" hay un solo archivo que son todos los elementos después de pasar por vulcanize. De nuevo, es una razón adicional para usar Polymer Starter Kit para el arranque tu proyecto.