Análisis de Dependencias con WebPath Bundle Analyzer

Resumen

¿Cómo instalar y configurar el WebPath Bundle Analyzer?

Analizar y optimizar los paquetes y dependencias de un proyecto es fundamental para mejorar su rendimiento. Una herramienta efectiva para esta tarea es el WebPath Bundle Analyzer. Este analizador es excelente para identificar qué componentes de tu proyecto pueden ser optimizados. A continuación, aprenderás a instalar y configurar esta herramienta con facilidad.

Instalación del WebPath Bundle Analyzer

Para comenzar, es esencial que instales el paquete adecuado. La instalación se realiza a través del siguiente comando en la terminal:

npm install webpack-bundle-analyzer -d

Aquí, la opción -d indica que esta dependencia es de desarrollo, no de producción. Asegúrate de corregir cualquier error tipográfico, como el nombre del paquete.

Configuración en Webpack

Una vez instalado, el siguiente paso es agregar el plugin a la configuración de desarrollo de tu proyecto. Para ello, realiza las siguientes acciones:

Abre el archivo de configuración webpack.config.dev.js de tu proyecto.

Declara una constante para el plugin de análisis:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Añade el plugin a la sección de plugins en la configuración de Webpack:
```
plugins: [
  new BundleAnalyzerPlugin()
]
```

Con esta configuración, podrás trabajar solo en modo desarrollo sin afectar la configuración optimizada para producción.

¿Cómo analizar y visualizar las dependencias del proyecto?

Una vez configurado, el siguiente paso es generar y visualizar el informe de las dependencias de tu proyecto usando los comandos que se describen a continuación.

Generar el informe de estadísticas

Para obtener un informe detallado, ejecuta este comando en la terminal:

npx webpack --profile --json > stats.json

Esto generará un archivo stats.json con estadísticas exhaustivas sobre las dependencias y recursos que utiliza tu proyecto.

Visualizar el informe con el Bundle Analyzer

Con el archivo de estadísticas generado, es momento de visualizar la información a través de una interfaz gráfica:

Ejecuta el siguiente comando en la terminal:
```
npx webpack-bundle-analyzer stats.json
```
Este comando abrirá una página web en un puerto diferente al de tu proyecto principal. Allí podrás explorar visualmente cada hoja de estilo, módulo de Node, y otras dependencias. Los gráficos permiten identificar fácilmente los componentes que más pesan en tu aplicación.

¿Qué beneficios ofrece el análisis visual de dependencias?

El análisis visual proporcionado por el WebPath Bundle Analyzer es intuitivo y facilita la comprensión de las siguientes características:

Identificación de recursos innecesarios: A menudo encontramos dependencias no utilizadas en un proyecto. Este análisis ayuda a detectarlas para eliminarlas y mejorar el rendimiento.
Peso de las dependencias: Puedes evaluar el peso de cada componente, identificar cuáles contribuyen más a la carga total y examinar opciones para reducir su impacto.
Perfección del código: Al identificar de manera visual los módulos y recursos más pesados, puedes optimizar y refactorizar el código para obtener un mejor rendimiento.

En resumen, emplear el WebPath Bundle Analyzer no solo simplifica el proceso de análisis, sino que te proporciona las herramientas necesarias para optimizar tu aplicación de manera efectiva y con una visualización amigable. ¡Continúa explorando estas posibilidades mientras despliegas tu aplicación y la llevas a la nube!

Fernando Quinteros Gutierrez

student•

🗒 Nota para la siguiente clase

Actualmente si corremos el modo dev no funcionara, en el require de webpack-bundle-analyzer Oscar agrega lo siguiente

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Con ello se arreglará el problema

José Diaz

student•

es raro que no tire del modulo por default, supongo que esto también valdría

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

Miguel Angel Reyes Moreno

student•

Gracias por este aporte :)

Juan Jose Hernandez Garcia

student•

Hola buenas, si utilizas la consola de editor de código(poweshell) y al ejecutar comando del bundle analyzer te sale un error. Usa este comando primero:

npx webpack --profile --json | Out-file 'stats.json' -Encoding OEM

y ya después no tendrías que tener ningún problema al ejecutar el bundle analyzer

fuente: https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/47

Héctor Hugo Moreira

student•

Muchas gracias por este aporte, solucionó mi problema

Hernán David Mercado Fernández

student•

Gracias Juan

Fernando Quinteros Gutierrez

student•

🥉 Webpack Bundle Analyzer

Apuntes

Cuando tenemos un proyecto es buena idea poder revisar su impacto en tamaño por ese motivo webpack nos ofrece un paquete para poder verificar y analizar el tamaño del bundle final
Para instalar corremos el comando

NPM

npm install -D webpack-bundle-analyzer

YARN

yarn add -D webpack-bundle-analyzer

Si deseamos hacer un análisis debemos correr los siguientes comandos

npx webpack --profile --json > stats.json

npx webpack-bundle-analyzer stats.json

Rodrigo Martinez

student•

Si le tienen fobia al peso de sus bundles, hay una pagina para ustedes 👉Bundlephobia

Platzi Team

student•

Jaja Excelente jaja que gran recurso

Fernando Quinteros Gutierrez

student•

🤖 Automatizando el analizador Probando un poco, actualmente implementar en el código el paquete no es necesario, ya que en la clase lo hacemos manualmente con los comandos, pero si deseamos automatizarlo podemos crear el siguiente script

Creamos el script en package.json de analyze

{
	...
	"scripts": {
		"build:analyze": "webpack --mode production --config webpack.config.js --analyze",
	}
}

El flag --analyze le dice al paquete webpack-bundle-analyzer que haga esa tarea sobre el bundle de producción

Si deseas hacer la implementación mediante el código, y tener más control sobre este aspecto, en la documentación de NPM nos comenta que podemos personalizar

NPM webpack-bundle-analyzer

Anibal Fernando Ortega Piedrahita

student•

Tengo una duda con este tema. Si el plugin se configuro en el archivo webpack.config.dev.js que es el archivo para realizar el build en desarrollo porque cuando se ejecuta el siguiente script que mencionas funciona y me entrega el resultado de analisis del bundle.

    "build:analyze": "webpack --mode production --config webpack.config.js --analyze"

Me genero esa inquitud o el flag lo que realiza es ir a buscar el plugin dentro de los node_modules sin necesidad de instanciarlo dentro del archivo de configuracíon de webpack.

Erasmo Hernández

student•

Si les llega a pasar que tienen el puerto 8888 ocupado, el bundleAnalyzer les tirará un error en la consola.

Para eso pueden agregar la siguiente opción dentro del archivo webpack.config.dev.js:

new BundleAnalyzerPlugin({
	analyzerPort: 1010
})

El 1010 lo pueden cambiar por el puerto deseado, solo lo puse como ejemplo.

Brahin Cassis

student•

tuve un problema con el BundleAnalyzerPlugin y lo resolví de la siguiente manera

me salía un error de sintaxis al tratar de ver el archivo que generaba a si que tube que hacer los cambios que salen el el link (https://stackoverflow.com/questions/50260262/how-to-run-webpack-bundle-analyzer/50260397)

Joel Eduardo Sánchez Herrera

student•

Hay un paquete que es Webpack Bundle Analyzer que nos ayuda a etender como esta constituido el proyecto y que elementos estan siendo grandes dentro del mismo y quitarle esta optimizacion.

Se instala:

npm install webpack-bundle-analyzer -D

Ahora vamos a ir a configurar en nuestro proyecto para agregarlo con:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Y en la parte inferior lo agregamos.

Ya que lo tenemos, correremos el siguiente comando para generar un reporte en un archivo:

npx webpack --profile --json> stats.json

Despues para poder verlo en un stitio web de forma mas ordenada usamos:

npx webpack-bundle-analyzer stats.json

Y podremos ver de forma grafica todo lo que estaen nuestro archivo

Fredy Ramirez

student•

Hola, alguien me puede ayudar con el siguiente error?

Fernando Quinteros Gutierrez

student•

Parece ser un problema del entorno, revisando un poco encontré este issue de GitHub

Mi sugerencia seria agregar lo siguiente npx webpack --profile --json | Out-file 'stats.json' -Encoding OEM Espero haberte contribuido un poco 😄 💚Nunca pares de aprender🤟

Sergio Rodrigo Zurita

student•

Muchas gracias por esa ayuda, se logro corregir ese error de "SyntaxError"

N40 M10

student•

si agregamos -p {number}, podemos modificar el puerto, yo en lo personal tengo servicios corriendo, también se puede usar mediante webpack.config.dev.js con el objeto analyzerPort. Este curso en lugar de solo arrojar código tendría que haber sido un curso en el que se lea la documentación del plugin y después plasmarlo en código...

Michelle Verano

student•

Hasta el momento lo unico que he hecho es tomar y tomar notas, practicar y practicar y poner feliz y mas feliz, que curso tan increible, habia escuchado de Webpack, pero jamas lo habia utilizado, y que error tan grande, que magnifico paquete. Y Ahora que se que existe turbopack no me imagino como sera.

Camilo José Mezú Mina

student•

En esta guía explican como realizarlo con una aplicación de react hecha con create-react-app https://create-react-app.dev/docs/analyzing-the-bundle-size/

Reinaldo Mendoza

student•

Tenia entendido que npx es para ejecutar modulos sin necesidad de dejarlos instalados, pero sin embargo instalamos un module para cada cosa que hacemos en el curso, entonces no se como esta funcionando ahora

Piero Rolando

student•

Hola bro, lo que pasa es que npx sirve para ejecutar modulos sin instalar que funcionen en terminal, es decir, que sean ejecutables, por ejemplo create-react-app, tsc, nodemon, y cosas así

Andres Prieto

student•

¿Exactamente que hacer el analyzer? Esa imagen interactiva ¿Qué es?

Luis Alejandro Vera Hernandez

student•

Este error como se corrige? 😅

clean-webpack-plugin: pausing due to webpack errors

Irving Juárez

student•

Lo que dice es que de pauso el clean-webpack-plugin debido a errores de webpack. Te dejo este link que encontré relacionado a tu problema https://stackoverflow.com/questions/55304512/cleanwebpackplugin-config-fail-when-build

Josue Miguel Prieto Mojica

student•

Agosto 21 2022 -> Actualmente el paquete de Webpack Bundle Analyzer tiene un problema. y arroja esto

npx webpack-bundle-analyzer ./stats.json ./dist
D:\[Mi ruta del proyecto]\js-portfolio\node_modules\webpack-bundle-analyzer\lib\viewer.js:91
      const url = analyzerUrl({
                  ^
TypeError: analyzerUrl is not a function

Deben de buscar en: node_modules >webpack-bundle-analyzer > lib > bin > analyzer.js Y busquen esta parte para agregar las dos líneas finales:

if (mode === 'server') {
  viewer.startServer(bundleStats, {
    openBrowser,
    port,
    host,
    defaultSizes,
    reportTitle,
    bundleDir,
    excludeAssets,
-> logger: new Logger(logLevel),
-> analyzerUrl: utils.defaultAnalyzerUrl
  });

Los autores están por publicar está modificación. De momento así es como se arregla. Éxito! :D

David Hereira

student•

en serio? yo no tuve problemas y lo acabo de correr, lo único que hice diferente fue que no instancié el plugin como lo hizo Oscar si no como lo explicaban en uno de los primeros comentarios aquí publicados y me corrió todo a la primera

Lucas Aristizábal

student•

https://www.npmjs.com/package/webpack-bundle-analyzer

según npm se puede aplicar como un plugin, o como un CLI.

Juan Pablo Jimenez

student•

20.-Webpack Bundle Analyzer

Para analizar el uso de paquetes y dependencias que estoy usando, para ayudarnos a optimizar aún más.

Lo instalamos:

npm install webpack-bundle-analyzer -D

Vamos a la configuración de desarrollo:

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer");

//Plugins
plugins: [
    new BundleAnalyzerPlugin(),
  ], //Solo estará en modo de desarrollo

Lo corremos con:

npx webpack --profile --json > stats.json
//Y va a guardar en un json la información. El reporte

Podemos ver el reporte en una página web que muestra todo lo importante, incluye todo lo que está en nuestro archivo de JS. Lo hacemos con:

npx webpack-bundle-analyzer stats.json

Brayan Ramirez Alzate

student•

me salió algo bastante diferente en comparación al resultado del profe, debería preocuparme?

José Josías Padilla Martínez

student•

Verifica que esta opción esté marcada:

Adalberto Zanabria Castro

student•

A mí también me dio el error de

SyntaxError: Unexpected token n JSON at position 1

Al abrir el archivo json me di cuenta que la línea 1 la inicia vacía, y después de la 2 a la 202 me incluyó en el archivo los mensajes que mostraría la terminal 🤔. Si los borro para que el archivo inicie con la "{" ya me deja ejecutarlo (aunque no me sale igual que al profe). Alguien sabe cómo soluciono esto? Estoy en Windows 10 desde WSL2 Ubuntu 21.10. Gracias!