Qué herramientas usar para hacer un seguimiento y analizar el paquete de Webpack
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
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 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
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
Instala el paquete
bundlesize
como una dependencia de desarrollo:npm install bundlesize --save-dev
En la sección
bundlesize
depackage.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", } ] }
Agrega una secuencia de comandos de npm para ejecutar la verificación:
// package.json { "scripts": { "check-size": "bundlesize" } }
Configura la CI para que ejecute
npm run check-size
en cada envío. (y integrabundlesize
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
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 oCommonsChunkPlugin
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
ydate-fns
, olodash
ylodash-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
ybundlesize
para mantenerte al tanto del tamaño de tu app - Analiza qué aumenta el tamaño con
webpack-bundle-analyzer