Optimización de Bundles en Proyectos Web con Webpack

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0017:14

Optimización de Bundles en Proyectos Web con Webpack

Curso de Optimización Web

Clase 22 de 38

Clase 22 / 38

Recursos

¿Cómo optimizar tus proyectos minimizando las dependencias?

En el desarrollo de aplicaciones, es común enfrentarse al desafío de manejar las dependencias de forma eficiente. Es crucial para mejorar el rendimiento y optimizar la entrega de nuestras aplicaciones. En este artículo, exploraremos estrategias y herramientas para identificar y reducir el impacto de las dependencias en nuestros proyectos. Prepárate para descubrir cómo optimizar tu código de manera efectiva.

¿Qué herramientas podemos usar para analizar las dependencias?

Existen varias herramientas y servicios que nos facilitan el análisis del impacto de las dependencias en nuestro proyecto:

Bundle Fogia: Es un servicio en línea que permite verificar cuánto influye cada librería en el tamaño de nuestro bundle antes y después de instalarlas.
Webpack y su plugin de análisis: Al ejecutar un análisis con --analyze, podemos ver directamente el impacto de cada dependencia en nuestra aplicación.

¿Cuál es el impacto de cargar librerías completas innecesariamente?

Un error común es cargar librerías completas cuando se utilizan pocos métodos. Vamos a analizar el caso de Lodash:

import _ from 'lodash'
let result = _.get(data, 'key');

En el ejemplo anterior, estamos importando toda la librería Lodash cuando solo usamos el método .get(). Esto resulta en un desperdicio de recursos, ya que cargamos un montón de funcionalidades que no necesitamos.

¿Cómo aplicar Tree Shaking efectivamente?

Para evitar cargar code innecesario, podemos emplear tree shaking, una técnica que ayuda a eliminar el código muerto durante el proceso de construcción. Para eso, es esencial usar una sintaxis apropiada:

import get from 'lodash/get'
let result = get(data, 'key');

Al utilizar la importación específica de métodos, habilitamos a Webpack para realizar el tree shaking, incluyendo solo las partes necesarias de la librería en el bundle. El cambio de sintaxis como el mostrado reduce significativamente el peso del bundle.

¿Qué hacer con librerías que no soportan tree shaking?

Por ejemplo, la librería Moment.js no permite tree shaking. En este caso, debemos buscar librerías alternativas que sean más eficientes. Una buena opción es date-fns:

Pasos para reemplazar Moment.js por date-fns:

Desinstalar Moment.js:
```
npm uninstall moment
```
Instalar date-fns:
```
npm install date-fns
```

Reemplazar Moment.js en el código:

import { formatDistance, parseISO } from 'date-fns'

let result = formatDistance(parseISO(date), new Date(), { addSuffix: true });

¿Qué resultados esperar al aplicar optimizaciones?

Al implementar estas estrategias, el peso del bundle de tu proyecto puede marcar una diferencia abismal. El resultado es que el bundle se vuelve mucho más liviano, reduciendo el tamaño de Gigabytes (GB) innecesarios a unos pocos Kilobytes (KB), lo cual es crucial para mejorar el rendimiento y la experiencia del usuario. El cambio en la estructura final del bundle será sustancial:

Peso inicial: 1.5 MB.
Peso después de optimizar: 30 KB.

Estas medidas no solo optimizan el tiempo de carga, sino también la eficiencia de tu aplicación al trasladar menos datos. Siempre recuerda evaluar y decidir si una librería se ajusta a las necesidades reales de tu proyecto.

Hector Vasquez

Hace 6 años

Para reducir el peso de moment, se puede usar este plugin https://www.npmjs.com/package/moment-locales-webpack-plugin que te permite elegir los idiomas que se quieren incluir en el bundle final.

En nuestro caso, necesitamos español, por lo tanto en el webpack config se agrega:

const MomentLocalesPlugin = require('moment-locales-webpack-plugin')

Y a plugins:

new MomentLocalesPlugin({
    localesToKeep: ['es'],
}),

Actualmente se estaba usando ingles en el sistema. Para usar español, en carouselItem.js ir donde se importa moment, y dejarlo así:

import moment from 'moment'
moment.locale('es')

Así el bundle queda mucho más liviano, y se usa fechas en español. Al parece, el paquete moment incluye internamente el ingles, en caso que no se use ningún paquete de idioma.

Jonathan 🦑 Alvarez

Profesor

Hace 6 años

👆 Esta es la forma de reducir el tamaño de moment cuando por alguna razón no se puede reemplazar y que venía mencionando en otros comentarios.

Buenísimo el aporte Hector 🔥

Luis Alejandro Vera Hernandez

Hace 5 años

😮 que gran aporte!. Muchas gracias, excelente clase también!

Comentarios (24)24 comentarios

Fernando Quinteros Gutierrez

Danilo Valenzuela

GERSON JAIR AYAVIRI CARRILLO

Adrian Daniel Sanchez Manrique

Juan Sebastian Bueno

Brayam Steven Builes Echavarria

Nilson Diaz

Marlon Gómez

Mauricio Costanzo

Roberto Fernandez Mata

Miguel Angel Reyes Moreno

Wilkins Bernardo Brito Serrano

Paolo Joaquin Pinto Perez

Kenneth Angulo L

Hace un mes

Julian David Alzate Cuervo

Hace 4 años

Stiven Castillo Montero

Erick Alejandro Graterol Barico

Rubén Ernesto Aragón Gil

Diego Grueso

Entendiendo el rendimiento

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

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

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

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

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

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

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

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

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

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

Comparación entre WebFonts y SVG: Ventajas y Desventajas

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

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

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

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

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

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

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

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

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

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

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

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

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Optimización de Bundles en Proyectos Web con Webpack