Entendiendo el rendimiento

1

Optimización Avanzada de Páginas Web con Técnicas Prácticas

2

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

3

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

4

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

5

Métricas de Experiencia de Usuario: LCP, FID y CLS

6

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

7

Entendiendo el Critical Rendering Path en Navegadores Web

8

Optimización de JavaScript para mejorar rendimiento web

9

Priorización de recursos CSS para mejorar rendimiento web

10

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

11

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

12

Optimización de Animaciones CSS para Mejorar Rendimiento

13

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

14

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

15

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

16

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

17

Comparación entre WebFonts y SVG: Ventajas y Desventajas

18

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

19

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

20

Optimización de JavaScript para Producción Web

21

Análisis y Optimización de Bundles con Webpack

22

Optimización de Bundles en Proyectos Web con Webpack

23

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

24

Lazy Loading de Videos con JavaScript y Modales

25

Event Propagation y Filtrado de Eventos en JavaScript

26

Integración de Librerías en Proyectos JavaScript

27

Optimización de Carga de Modales con Lazy Loading en Webpack

28

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

29

Implementación de Server Side Rendering en NodeJS

30

Optimización de Sitios con Static Site Generation

Caché

31

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

32

Configuración y despliegue de sitios web con Netlify y Github Actions

33

Automatización de despliegues con Github Actions y Cron en Netlify

34

Implementación de Caché con Service Workers en JavaScript

Performance Budget

35

Auditoría de Performance Web con Github Actions y Lighthouse

36

Creación de Pull Request y Auditorías con Github Actions

37

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

38

Optimización del Critical Render Path en Aplicaciones Web

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Análisis y Optimización de Bundles con Webpack

21/38
Recursos

¿Cómo analizar el tamaño del bundle en una aplicación con Webpack?

En el desarrollo de aplicaciones modernas, la optimización del tamaño del bundle de JavaScript es crucial para mejorar la performance y la experiencia del usuario. Webpack es uno de los empaquetadores más utilizados para este propósito, pero conocer cómo analizar el tamaño de tu bundle es esencial para sacar el máximo provecho de él. Aquí te mostramos cómo hacerlo usando Webpack Bundle Analyzer y reflexionamos sobre si realmente necesitamos todas las dependencias en nuestro proyecto.

¿Qué es Webpack y por qué es relevante?

Webpack es una herramienta poderosa utilizada para empaquetar aplicaciones de JavaScript modernas. Su popularidad se debe a su capacidad para gestionar la complejidad de las dependencias y recursos que componen una aplicación. Sin embargo, a medida que se añaden más dependencias, el bundle puede crecer innecesariamente, afectando el rendimiento de la aplicación.

¿Cómo utilizar Webpack Bundle Analyzer?

Para identificar áreas que puedan optimizarse, Webpack ofrece herramientas y plugins como el Webpack Bundle Analyzer, que visualiza los módulos del bundle de manera gráfica.

  1. Instalación del plugin: Comienza instalando el plugin en tu proyecto:

    npm install --save-dev webpack-bundle-analyzer
    
  2. Configuración en webpack.config.js: Importa y configura el plugin en tu archivo de configuración de Webpack:

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    
    module.exports = {
      plugins: [
        new BundleAnalyzerPlugin()
      ],
    };
    
  3. Ejecución y análisis: Ejecuta la construcción de tu proyecto para abrir el análisis visual:

    npm run build
    

    Automáticamente, se abrirá una ventana que muestra un gráfico con todos los módulos empaquetados. Aquí puedes ver el impacto de cada dependencia en el tamaño total del bundle.

¿Es necesario incluir todas las dependencias actuales?

Una vez analizado el bundle, es fundamental evaluar cada dependencia. En el ejemplo, se descubrió que lodash y moment eran las dependencias más pesadas.

Pregúntate:

  • ¿Realmente necesito esa dependencia?
  • ¿Uso todas las funcionalidades de la librería o solo una parte?
  • ¿Existen alternativas más ligeras?

Estas preguntas te ayudarán a decidir si debes mantener, eliminar o buscar alternativas a ciertas librerías para mejorar la eficiencia.

¿Cómo incluir el plugin de análisis de forma condicional?

El análisis del bundle puede ser costoso en tiempo y recursos. Por eso, puedes configurar Webpack para ejecutar el análisis solo cuando sea necesario:

  1. Agregar el plugin condicionalmente:

    const shouldAnalyze = process.argv.includes('--analyze');
    
    module.exports = {
      plugins: shouldAnalyze ? [new BundleAnalyzerPlugin()] : [],
    };
    
  2. Ejecución condicional:

    Usa el siguiente comando solo cuando necesites analizar:

    npm run build -- --analyze
    

¿Existen alternativas a moment y lodash?

Alternativas más ligeras pueden reducir significativamente el tamaño del bundle. Por ejemplo:

  • Alternativa a moment: Considera utilizar date-fns o dayjs si necesitas solo funcionalidades específicas de manejo de fechas.
  • Alternativa a lodash: Puedes optar por importar solo los métodos específicos de lodash que necesitas o considerar librerías más livianas como rambda.

La optimización del bundle no solo mejorará la velocidad de carga de la aplicación, sino que también optimizará recursos y mejorará la experiencia del usuario. Continúa explorando y experimentando con alternativas para reducir aún más su tamaño. ¡Tu camino hacia un desarrollo más eficiente comienza con estas pequeñas pero significativas optimizaciones!

Aportes 12

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

🔍 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

si a alguien le puede servir dejo la doc de next.js
https://github.com/vercel/next.js/tree/canary/examples/analyze-bundles

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 webpack@latest

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

Quiero compartir que en el archivo apis.js estamos trayendo toda la librería de lodash al usarlo de esta manera:

import _ from 'lodash''
const extractData = json => _.get(json, 'data', []);

Lo que hice fue importar sólo la función que necesitamos de la librería y no toda la librería, de esta manera:

import get from 'lodash/get';

const extractData = json => get(json, 'data', []);

Como resultado el tamaño de lodash disminuyó en el reporte del analizador pasando de 531kb a 30.93kb

Con moment no se puede porque la función moment siempre debe ser usada para llenarla con parámetros y luego hacer uso de sus métodos en el objeto devuelto.

Quizá este curso se deba actualizar con vite... 🤔

Que genial 🤟

ya quiero que salga