Supervisa y analiza la app

Qué herramientas utilizar para realizar un seguimiento del paquete 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 él y saber qué incluye. De lo contrario, puedes instalar una dependencia que haga que el el doble de grande 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 CI.

webpack-dashboard

webpack-dashboard mejora el resultado del paquete web con tamaños de dependencias, progreso y otros detalles. A continuación, te mostramos cómo se ve:

Este panel ayuda a rastrear grandes dependencias; 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 con 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 las bibliotecas que son demasiado grandes y que se podrían reemplazar con alternativas más pequeñas.

tamañodel paquete

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

Para configurarlo, sigue estos pasos:

Descubra los tamaños máximos

1. Optimizar 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 comando: 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. Agregue entre un 10% y un 20% a cada tamaño y obtendrá los tamaños máximos. Este margen del 10-20% te permitiría desarrollar la app como de costumbre y, al mismo tiempo, advertirte cuando su tamaño crezca demasiado

   Habilitar 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 el valor los tamaños máximos. Para algunos archivos (p. ej., imágenes), es posible que desees especificar el tamaño máximo por 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. (Además, 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 se lo suficientemente pequeño:

O bien, en caso de fallas:

Lecturas adicionales

• Alex Russell acerca del tiempo de carga real que deberíamos objetivo

Analizar por qué el paquete es tan grande

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

webpack-bundle-analyzer escanea el paquete y crea una visualización de su contenido. Usar esta la 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 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 los de los usuarios reales. experiencia; utiliza 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., Preparación previa 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 la misma biblioteca que se repite en varios archivos? (Uso, 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 hagan aproximadamente el mismo trabajo? (p.ej., moment y date-fns, o lodash y lodash-es). Intenta utilizar una sola herramienta.

No te pierdas el excelente análisis del webpack de Sean Larkin Conjuntos de datos.

En resumen

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