Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Webpack Bundle Analyzer

20/28
Recursos

Aportes 12

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

🗒 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

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

🥉 Webpack Bundle Analyzer

<h4>Apuntes</h4>
  • 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

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

🤖 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

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.

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)

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

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/

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

Instalar dependencia

npm install webpack-bundle-analyzer -D -E

Agregar script a package.json

"build:analyze": "webpack --profile --json > stats.json &&  webpack-bundle-analyzer stats.json dist",

Como resultado se realiza un análisis del bundle de producción ya que por defecto siempre se hace referencia a webpack.config.js. Recordar añadir el archivo stats.json a .gitignore por ser un archivo generado.

Referencia:

https://github.com/webpack-contrib/webpack-bundle-analyzer

Tenía el siguiente error

Al ejecutar

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

Lo solucioné simplemente corriendo npm run dev . Cuando no lo necesito más, comento el plugin