Usa bundlesize con Travis CI

Milica Mihajlija

Si usas bundlesize con Travis CI, puedes definir presupuestos de rendimiento con una configuración mínima y aplicarlos como parte de tu flujo de trabajo de desarrollo. Travis CI es un servicio que ejecuta pruebas para tu app en la nube cada vez que envías código a GitHub. Puedes configurar tu repositorio para que no permita combinar solicitudes de extracción, a menos que se hayan aprobado las pruebas de bundlesize.

Las verificaciones de GitHub de bundlesize incluyen una comparación de tamaño con la rama principal y una advertencia en caso de que haya un gran aumento de tamaño.

Para verlo en acción, aquí tienes una app empaquetada con webpack que te permite votar por tu gatito favorito.

Establece el presupuesto de rendimiento

Este Glitch ya contiene bundlesize.

• Haz clic en Remix to Edit para que el proyecto se pueda editar.

El paquete principal de esta app se encuentra en la carpeta pública. Para probar su tamaño, agrega la siguiente sección al archivo package.json:

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

Para mantener el tamaño del paquete de JavaScript comprimido dentro del límite recomendado, establece el presupuesto de rendimiento en 170 KB en el campo maxSize.

Bundlesize admite patrones glob y el carácter comodín * en la ruta de acceso del archivo coincidirá con todos los nombres de paquetes de la carpeta pública

Crea una secuencia de comandos de prueba

Como Travis necesita una prueba para ejecutarse, agrega una secuencia de comandos de prueba a package.json:

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

Cómo configurar la integración continua

Integra GitHub y Travis CI

Primero, crea un repositorio nuevo para este proyecto en tu cuenta de GitHub y, luego, inicialízalo con un README.md.

Deberás registrar una cuenta en Travis y activar la integración de GitHub Apps en la sección Configuración de tu perfil.

Una vez que tengas una cuenta, ve a Configuración en tu perfil, haz clic en el botón Sincronizar cuenta y asegúrate de que tu repositorio nuevo aparezca en Travis.

Autoriza bundlesize para publicar en solicitudes de extracción

Bundlesize necesita autorización para poder publicar en solicitudes de extracción, por lo que visita este vínculo para obtener el token de bundlesize que se almacenará en la configuración de Travis.

En el panel de Travis de tu proyecto, ve a Más opciones > Configuración > Variables de entorno.

Agrega una variable de entorno nueva con el token como el campo de valor y BUNDLESIZE_GITHUB_TOKEN como el nombre.

Lo último que necesitas para iniciar la integración continua es un archivo .travis.yml, que le indica a Travis CI qué hacer. Para acelerar las cosas, ya se incluye en el proyecto y especifica que la app usa NodeJS.

Con este paso, ya está todo listo y bundlesize te advertirá si tu JavaScript supera el presupuesto. Incluso cuando comienzas bien, con el tiempo, a medida que agregas funciones nuevas, los kilobytes pueden acumularse. Con la supervisión automatizada del presupuesto de rendimiento, puedes estar tranquilo, ya que no pasará desapercibido.

Probar

Activa tu primera prueba de bundlesize

Para ver cómo se compara la app con el presupuesto de rendimiento, agrega el código al repositorio de GitHub que creaste en el paso 3.

1. En Glitch, haz clic en Herramientas > Git, Importar y exportar > Exportar a GitHub.

2. En la ventana emergente, ingresa tu nombre de usuario de GitHub y el nombre del repositorio como username/repo. Glitch exportará tu app a una rama nueva llamada "glitch".

3. Para crear una solicitud de extracción nueva, haz clic en el botón New pull request en la página principal del repositorio.

Ahora verás las verificaciones de estado en curso en la página de solicitud de extracción.

No tardará mucho en completarse todas las verificaciones. Lamentablemente, la app de votación de gatos está un poco inflada y no pasa la verificación del presupuesto de rendimiento. El paquete principal es de 266 KB y el presupuesto es de 170 KB.

Optimizar

Por suerte, puedes obtener algunas ganancias de rendimiento fáciles si quitas el código que no se usa . Hay dos importaciones principales en src/index.js:

import firebase from "firebase";
import * as moment from 'moment';

La app usa Firebase Realtime Database para almacenar los datos, pero importa todo el paquete de Firebase, que consta de mucho más que una base de datos (autenticación, almacenamiento, mensajería, etcétera).

Para solucionar este problema, importa solo el paquete que necesita la app en el archivo src/index.js:

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

Volver a ejecutar prueba

Como se actualizó el archivo fuente, debes ejecutar webpack para compilar el archivo de paquete nuevo.

1. Haz clic en el botón Herramientas.

2. Luego, haz clic en el botón Consola. Se abrirá la consola en otra pestaña.

3. En la consola, escribe webpack y espera a que finalice la compilación.

4. Exporta el código a GitHub desde Herramientas > Git, Importar y exportar > Exportar a GitHub.

5. Ve a la página de solicitud de extracción en GitHub y espera a que finalicen todas las verificaciones.

¡Listo! El tamaño nuevo del paquete es de 125.5 KB y se aprobaron todas las verificaciones. 🎉

A diferencia de Firebase, importar partes de la biblioteca moment no se puede hacer con tanta facilidad, pero vale la pena intentarlo. Consulta cómo puedes optimizar aún más la app en el codelab Quitar código que no se usa.

Supervisar

Ahora, la app está dentro del presupuesto y todo está en orden. Travis CI y bundlesize seguirán supervisando el presupuesto de rendimiento por ti, lo que garantizará que tu app siga siendo rápida.