si a alguien le puede servir dejo la doc de next.js
https://github.com/vercel/next.js/tree/canary/examples/analyze-bundles
Entendiendo el rendimiento
Todo lo que aprenderás sobre optimización web
¿Vale el esfuerzo optimizar un sitio web?
¿Cuándo realmente un sitio es rápido o lento?
Antes de optimizar...
Aprendiendo a medir
User Performance Metrics
Nuestro proyecto
Crítical Rendering Path
Etapas de render del navegador
Network waterfall y recursos que bloquean el navegador
Priorización de recursos
Preloading y prefetching de recursos
Fases Paint y Layout del Critical Render Path
CSS
Detectando Paints costosos y optimizando animaciones
Bloqueos y complejidad en selectores
WebFonts
WebFonts y su impacto en rendimiento
Imágenes, Iconos y SVG
Imágenes, formato y compresión
Imágenes y compresión
¿WebFont, Imagen o SVG?
Técnicas avanzadas con Lazy Loading
Técnicas avanzadas con Responsive Loading
Aplicaciones JavaScript
JavaScript y aplicaciones modernas y Utilizando un servidor de producción
Analizando el bundle de la aplicación
Reduciendo el tamaño del bundle
Code Splitting
Lazy Module Loading
Llevando los listeners a otro nivel
Instalando Modal video
Lazy loading del modal
Moviendo la carga de rendering hacia el servidor: Server Side Rendering
Aplicando SSR
Pre-renderizando el contenido: Static Generation
Caché
Cómo funciona el Caché de recursos y CDN
Deploy en Netlify y automatización de contenido en GitHub Actions
Aplicando Github Actions
Interceptando los requests del navegador con Service Workers
Performance Budget
Performance budget y auditorias automatizadas
Automatizando una auditoría con Lighthouse CI
Medidas reales y monitoreo constante
Conclusiones
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Analizando el bundle de la aplicación
21/38Recursos
Aportes 10
Preguntas 1
Ordenar por:
🔍 Analizando el bundle de la aplicación
<h4>Recursos</h4>webpack-contrib/webpack-bundle-analyzer
<h4>Apuntes</h4>- webpack tienen herramientas y plugins que nos ayudan a analizar el bundle del JS
- Podemos usar webpack bundler analyzer para analizar y tener una medida exacta de que está pasando dentro del bundler a través de una grafica
RESUMEN: Podemos verificar el tamaño de nuestras dependencias y nuestro código a través de herramientas de análisis de tamaño
Les recomiendo crear un comando nuevo en su archivo package.json, de forma que sea más sencillo utilizar este nuevo comando de webpack.
"analyze": "webpack -p --analyze"
Para usarlo solo ejecuten en consola npm run analyze
Creo que ahora Chrome nos permite hacer esto directamente desde la pestaña de lighthouse con la opción View Treemap
👇
Genial esta herramienta, de ahora en adelante la tendré como una de mis herramientas fijas.
Like si sienten el poder llegando a sus manos.
Asegurate de tener la version de webpack actualizada para que no te tire error el plugin por incompatibilidad de versiones.
npm install [email protected]
Que genial 🤟
Si les sale algun error al correr el comando, puede ser que porque no hayan cerrado el serve ya que el analyzer abre en el puerto 8080 y si este esta ocupado genera un error
ya quiero que salga
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.