Supervisa y analiza la app

Qué herramientas usar para hacer un seguimiento y analizar el paquete de Webpack

Ivan Akulov

Incluso cuando configuras webpack para que la app sea lo más pequeña posible, es importante hacer un seguimiento de ella 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.

Realiza un seguimiento del tamaño del paquete

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

webpack-dashboard

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

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

Para habilitarlo, instala el paquete webpack-dashboard:

npm install webpack-dashboard --save-dev

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 usa compiler.apply() si usas un servidor de desarrollo basado en Express:

compiler.apply(new DashboardPlugin());

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

tamañodel paquete

bundlesize verifica que los recursos del paquete web no superen los tamaños especificados. Intégralo a un CI para recibir notificaciones cuando la app se vuelva demasiado grande:

Para configurarlo, sigue estos pasos:

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 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 y obtendrás 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.

   Habilita bundlesize

5. Instala el paquete bundlesize como una dependencia de desarrollo:

   npm install bundlesize --save-dev
   

6. En la sección bundlesize de package.json, especifica los tamaños máximos concretos. Para algunos archivos (p.ej., imágenes), te recomendamos que especifiques 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 estás desarrollando el proyecto en él).

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, haz lo siguiente:

Lecturas adicionales

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

Analiza por qué el paquete es tan grande

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

webpack-bundle-analyzer analiza el paquete y crea 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). Se recomienda que compares los tamaños de gzip, ya que se acercan más a la experiencia de los usuarios reales. Usa la barra lateral de la izquierda para cambiar los tamaños.

Esto es lo que debes buscar en el informe:

• Dependencias grandes. ¿Por qué son tan grandes? ¿Hay 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 eliminar.
• Dependencias duplicadas. ¿Ves la misma biblioteca repetida en varios archivos? (Usa, por ejemplo, la opción optimization.splitChunks.chunks en webpack 4 o CommonsChunkPlugin en webpack 3 para moverla a un archivo común). ¿O tiene el paquete varias versiones de la misma biblioteca?
• Dependencias similares. ¿Hay bibliotecas similares que hagan aproximadamente el mismo trabajo? (p.ej., moment y date-fns, o lodash y lodash-es). Intenta utilizar una sola herramienta.

Además, consulta el excelente análisis de Sean Larkin sobre los paquetes de webpack.

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