Qué herramientas usar para hacer un seguimiento del paquete webpack y analizarlo
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
Optimiza la app para que sea lo más pequeña posible. Ejecuta la compilación de producción.
Agrega la sección
bundlesize
apackage.json
con el siguiente contenido:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
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
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
Instala el paquete
bundlesize
como dependencia de desarrollo:npm install bundlesize --save-dev
En la sección
bundlesize
enpackage.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", } ] }
Agrega una secuencia de comandos de npm para ejecutar la verificación:
// package.json { "scripts": { "check-size": "bundlesize" } }
Configura la CI para ejecutar
npm run check-size
en cada envío. (Además, integrabundlesize
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
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:
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.
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 elCommonsChunkPlugin
, 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
ydate-fns
, olodash
ylodash-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
ybundlesize
para mantenerte al tanto del tamaño de tu app - Analiza lo que aumenta el tamaño con
webpack-bundle-analyzer