Webpack Bundle Analyzer

🗒 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

• 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

• NPM webpack-bundle-analyzer

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

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.

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/

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! 😄

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…

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

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

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

Estpa suave está cosa

Solo con el hecho de instalar Webpack bundle analyzer npm install arroja muchas advertencias, tanto que nisiquiera ejecutando el npm audit fix se arreglan.

BundleAnalyzerPlugin is not a constructor

Para solucionar error:

Gersom js-portfolio % npm run dev

> js-portfolio@1.0.0 dev
> webpack --config webpack.config.dev.js

[webpack-cli] Failed to load '/Users/Gersom/Documents/personal-git/js-portfolio/webpack.config.dev.js' config
[webpack-cli] TypeError: BundleAnalyzerPlugin is not a constructor

solo hay que des estructurar la importación de BundleAnalyzerPlugin

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
...
plugins: [
   ...
   new BundleAnalyzerPlugin()
],

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