Supervisa y analiza la app

Qué herramientas usar para hacer un seguimiento del paquete de webpack y analizarlo

Ivan Akulov

Incluso cuando configuras webpack para que la app sea lo más pequeña posible, es importante hacer un seguimiento de su tamaño y saber qué incluye. De lo contrario, puedes instalar una dependencia que hará que la app sea el doble de grande, ¡y ni siquiera lo notarás!

En esta sección, se describen las herramientas que te ayudan a comprender tu paquete.

Haz un seguimiento del tamaño del paquete

Para supervisar el tamaño de tu app, usa webpack-dashboard durante el desarrollo y bundlesize en la CI.

webpack-dashboard

webpack-dashboard mejora el resultado de webpack con tamaños de dependencias, progreso y otros detalles. Así es como se ve:

Este panel ayuda a hacer un seguimiento de las dependencias grandes. Si agregas una, la verás de inmediato en la sección Módulos.

Para habilitarlo, instala el paquete webpack-dashboard:

npm install webpack-dashboard --save-dev

Y agrega el complemento a la sección plugins de la configuración:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

o con compiler.apply() si usas un servidor de desarrollo basado en Express:

compiler.apply(new DashboardPlugin());

No dudes en explorar el panel para encontrar los posibles lugares de mejora. Por ejemplo, desplázate por la sección Módulos para encontrar qué bibliotecas son demasiado grandes y podrían reemplazarse por alternativas más pequeñas.

bundlesize

bundlesize verifica que los recursos de webpack no excedan los tamaños especificados. Intégralo en un CI para recibir notificaciones cuando la app se vuelva demasiado grande:

Para configurarlo, haz lo siguiente:

Descubre los tamaños máximos

1. Optimiza la app para que sea lo más pequeña posible. Ejecuta la compilación de producción.

2. Agrega la sección bundlesize a package.json con el siguiente contenido:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. Ejecuta bundlesize con npx:

   npx bundlesize
   

   Esto imprimirá el tamaño comprimido con gzip de cada archivo:

   PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
   PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
   PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
   PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
   

4. Agrega entre un 10% y un 20% a cada tamaño para obtener los tamaños máximos. Este margen del 10% al 20% te permitiría desarrollar la app como de costumbre y, al mismo tiempo, te advertiría cuando su tamaño aumente demasiado.

   Habilitar bundlesize

5. Instala el paquete bundlesize como dependencia de desarrollo:

   npm install bundlesize --save-dev
   

6. En la sección bundlesize del package.json, especifica los tamaños máximos concretos. En el caso de algunos archivos (p.ej., imágenes), es posible que desees especificar el tamaño máximo por tipo de archivo, no por cada archivo:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*.png",
         "maxSize": "16 kB",
       },
       {
         "path": "./dist/main.*.js",
         "maxSize": "20 kB",
       },
       {
         "path": "./dist/vendor.*.js",
         "maxSize": "35 kB",
       }
     ]
   }   
   

7. Agrega una secuencia de comandos de npm para ejecutar la verificación:

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. Configura la CI para que ejecute npm run check-size en cada envío. (Y integra bundlesize con GitHub si desarrollas el proyecto en esa plataforma).

Eso es todo. Ahora, si ejecutas npm run check-size o envías el código, verás si los archivos de salida son lo suficientemente pequeños:

O, en caso de fallas:

Lecturas adicionales

• Alex Russell sobre el tiempo de carga del mundo real al que deberíamos apuntar

Analiza por qué el paquete es tan grande

Es posible que desees profundizar en el paquete para ver qué módulos ocupan espacio en él. Conoce webpack-bundle-analyzer:

webpack-bundle-analyzer analiza el paquete y genera una visualización de su contenido. Usa esta visualización para encontrar dependencias grandes o innecesarias.

Para usar el analizador, instala el paquete webpack-bundle-analyzer:

npm install webpack-bundle-analyzer --save-dev

Agrega un complemento a la configuración de webpack:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

y ejecuta la compilación de producción. El complemento abrirá la página de estadísticas en un navegador.

De forma predeterminada, la página de estadísticas muestra el tamaño de los archivos analizados (es decir, de los archivos tal como aparecen en el paquete). Es probable que desees comparar los tamaños de gzip, ya que se acercan más a lo que experimentan los usuarios reales. Usa la barra lateral de la izquierda para cambiar los tamaños.

En el informe, busca lo siguiente:

• Dependencias grandes. ¿Por qué son tan grandes? ¿Existen alternativas más pequeñas (p.ej., Preact en lugar de React)? ¿Usas todo el código que incluye (p.ej., Moment.js incluye muchas configuraciones regionales que a menudo no se usan y se podrían quitar.
• Dependencias duplicadas. ¿Ves la misma biblioteca repetida en varios archivos? (Usa, p.ej., la opción optimization.splitChunks.chunks en webpack 4 o CommonsChunkPlugin en webpack 3 para moverlo a un archivo común). ¿O el paquete tiene varias versiones de la misma biblioteca?
• Dependencias similares. ¿Existen bibliotecas similares que realicen aproximadamente el mismo trabajo? (p.ej., moment y date-fns, o lodash y lodash-es). Intenta usar una sola herramienta.

También puedes consultar el excelente análisis de los paquetes de webpack de Sean Larkin.

En resumen

• Usa webpack-dashboard y bundlesize para mantenerte al tanto del tamaño de tu app
• Analiza qué aumenta el tamaño con webpack-bundle-analyzer