Supervisa y analiza la app

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

Ivan Akulov

Twitter GitHub Página principal

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

En esta sección, se describen las herramientas que te ayudarán 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 del paquete web con los tamaños de las dependencias, el progreso y otros detalles. A continuación, te mostramos cómo se ve:

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

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

compiler.apply(new DashboardPlugin());

Siéntete libre de jugar con el panel para encontrar los posibles lugares de mejora. Por ejemplo, desplázate por la sección Modules para ver qué bibliotecas son demasiado grandes y se podrían reemplazar por alternativas más pequeñas.

tamaño del paquete

bundlesize verifica que los elementos de webpack no superen los tamaños especificados. Intégralo a una CI para recibir notificaciones cuando la app sea 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 como 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. Agregue entre un 10% y un 20% a cada tamaño y obtendrá los tamaños máximos. Este margen del 10 al 20% te permitiría desarrollar la app como de costumbre y te advertiría si aumenta demasiado el tamaño.

   Habilitar bundlesize

5. Instala el paquete bundlesize como dependencia de desarrollo:

   npm install bundlesize --save-dev
   

6. En la sección bundlesize en package.json, especifica los tamaños máximos concretos. Para 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 ejecutar npm run check-size en cada envío. (Además, integra bundlesize con GitHub si desarrollas el proyecto en ella).

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 bien, en caso de fallas:

Lecturas adicionales

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

Analizar 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:

(Grabación de pantalla desde github.com/webpack-contrib/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 del paquete web:

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

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

y ejecutar 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 quieras comparar los tamaños de gzip, ya que es más parecido a lo que experimentan los usuarios reales. Usa la barra lateral de la izquierda para cambiar los tamaños.

Nota: Si usas ModuleConcatenationPlugin, es posible que combine una parte de los módulos en el resultado webpack-bundle-analyzer, por lo que el informe será menos detallado. Si usas este complemento, inhabilítalo durante el análisis.

Esto es lo que debe 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 podrían descartarse).
• Dependencias duplicadas. ¿Ves que la misma biblioteca se repite en varios archivos? (Usa, p.ej., la opción optimization.splitChunks.chunks, en el paquete web 4, o el CommonsChunkPlugin, en el paquete web 3, para moverlo 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 usar una sola herramienta.

Además, consulta el gran análisis de paquetes web de paquetes de Sean Larkin.

En resumen

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