No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Webpack Bundle Analyzer

20/28
Recursos

Aportes 19

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

馃棐 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

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