Polymer en Producción: Vulcanizado (Vulcanize) de elementos

  • Por
Qué es el vulcanizado de elementos, con Vulcanize, uno de los pasos esenciales para llevar una aplicación Polymer a producción.

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"

Nota: Con la próxima llegada de HTTP2 este tipo de herramientas quedarán obsoletas porque el protocolo en su segunda versión no penalizará que el servidor envíe los múltiples archivos de los que consta una página web.

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

Nota: Es interesante comentar que este proceso recorre los imports de la especificación de Web Components que se estén usando en el proyecto en un momento dado, no todas las librerías que tengas en una carpeta. Puede darse el caso que hayas instalado un proyecto una cantidad enorme de componentes, pero que solo hayas usado verdaderamente unos pocos. El vulcanizado sólo unirá los HTML Imports que se encuentren en el código de tu archivo de entrada y en el código de todos los archivos importados, de manera recursiva.

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.

Nota: El recientemente presentado Polymer CLI (las herramientas por línea de comandos de Polymer) ya tiene un proceso de "Build" integrado que realiza la vulcanización por debajo. Es decir, no tendrías necesidad de usar directamente tú el comando de vulcanize para realizar la unión de elementos en un solo fichero. Además, a esto le tenemos que agregar la posibilidad de los elementos "lazy load", que retardan su carga hasta que realmente se vayan a usar en el navegador. Todos los componentes de carga perezosa se tendrían que compactar por separado, manteniendo varios ficheros de componentes vulcanizados. Toda esa operativa también te la realiza Polymer CLI y tú solo tendrías que realizar unas pequeñas configuraciones. Daremos más detalles sobre este proceso en breve.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir