Implementando Webpack Bundle Analyzer

3/23
Recursos
Transcripción

Aportes 13

Preguntas 6

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Webpack bundle analyzer: analiza los paquetes que utilizamos en nuestro proyecto

instalarlo

npm install webpack-bundle-analyzer --save-dev

compilamos con la bandera para generar un archivo de estadisticas

ng build --prod --stats-json

en la carpeta dist ubicamos el archivo stats-es2015.json

dist/my-project/stats-es2015.json 

usando npx, corremos el comando para generar el analisis

npx webpack-bundle-analyzer dist/my-project/stats-es2015.json

nos sale luego algo compilamos

webpack bundle analyzer is started at http://127.0.0.1:8888 

donde podremos ver el resultado con estadisticas y graficos.

Si te da un error tipo:` Bundle analyzer Error: listen EADDRINUSE :::8888

Hay de dos:

  • o matas el proceso con kill -9 <PID>
  • o le pasas por par√°metro el puerto, uno distinto al que te marque en uso, ejemplo: npx webpack-bundle-analyzer -p 1234 dist/YourProjectName/stats-es2015.json

Eso funcionó para mi, decía que tenía el puerto 8888 ocupado y primero lo maté el proceso y después intenté con correr en otro puerto, me quedé con la segunda, porque el 8888 lo usa vscode con git.

Fin del comunicado, deje su buen laic.

Desde Angular 10 al instalar el repo de la clase ng serve no encontraba @angular-devkit/build-angular, por si te pasa igual:

  • borra package-lock.json (No el package.json)
  • borra /node_modules
  • ejecuta npm cache clean --force
  • Ejecuta npm install
  • Ejecuta npm install --save-dev @angular/[email protected]

Si a alguien le salio el mismo error que a mí al querer instalar node modules:

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/es-abstract/-/es-abstract-1.14.0.tgz - Not found

Lo que hice fue ejecutar el comando:

npm i [email protected]1.14.2

Y eso soluciono el problema

No necesité instalar webpack-bundle-analyzer como dependencia local. Sólo creé los archivos estáticos y el stats.json con ng build y luego usé el comando

npx webpack-bundle-analyzer dist/my-project/stats-es2015.json

Genero el ng build --prod --stats-json
Pero no me esta generando el archivo stats-es2015.js

waaaaao esto es muy bueno para mi Ya!!! lo voy a implementar

Uhhh esto yo lo hice hace un mont√≥n de tiempo! Y siempre que queria ver por que pesaba tanto tengo que ir a buscar ‚ÄúComo era que hacia?‚ÄĚ, ūüėā Ahora voy a tener una gu√≠a de como hacerlo paso a paso ! Genial este curso! Muchas gracias!

El webpack bundle analizer nos permite ver visualmente que archivos del proyecto son los que est√°n pesando m√°s.

Al ejectura npm install en el proyecto arroja una serie de errores y no se instala correctamente todas las dependencias y por ende el proyecto de ejemplo no se ejecuta.

Se podrá de alguna forma llevar está data con un pipeline que te la envíe por correo pata revisarla siempre que se haga un update en prod o bien que compare las versiones para ver si sube y en donde?

El equipo de Angular recomienda otra herramienta para analizar nuestros bundles, les dejo un Tutorial que hice al respecto

webpack-bundle-analyzer despliega una gráfica interactiva con el resultado de nuestro bundle, qué dependencias contiene y cuánto pesan.