Qué herramientas utilizar para realizar un seguimiento del paquete webpack y analizarlo
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:
![Captura de pantalla del resultado del panel de Webpack](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-webpack-3e248f1f172ea.png?authuser=7&hl=es-419)
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:
![Captura de pantalla de la sección de CI de una solicitud de extracción en GitHub. Entre
de las herramientas de CI, está el resultado de Bundlesize,](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-ci-section-5283cb670e1d6.jpg?authuser=7&hl=es-419)
Para configurarlo, sigue estos pasos:
Descubra los tamaños máximos
Optimizar 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 comando: 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
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
Instala el paquete
bundlesize
como una dependencia de desarrollo:npm install bundlesize --save-dev
En la sección
bundlesize
depackage.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", } ] }
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. (Además, 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 se
lo suficientemente pequeño:
![Captura de pantalla del resultado del tamaño de paquete. Todas las compilaciones
los resultados están marcados con "Aprobado"](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-142fea0baa50c.png?authuser=7&hl=es-419)
O bien, en caso de fallas:
![Captura de pantalla del resultado del tamaño de paquete. Algo de compilación
los resultados se marcan como "Desaprobado"](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-6ec1755da19dd.png?authuser=7&hl=es-419)
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. 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) oCommonsChunkPlugin
, 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
ydate-fns
, olodash
ylodash-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
ybundlesize
para mantenerte al tanto del tamaño de tu app - Profundiza en lo que aumenta el tamaño con
webpack-bundle-analyzer
.