Optimización de Carga de Modales con Lazy Loading en 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:0013:24

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

Curso de Optimización Web

Clase 27 de 38

Clase 27 / 38

Recursos

Cargar toda la lógica de una aplicación web desde el primer momento es uno de los errores más comunes que afectan el rendimiento. Cuando una librería solo se necesita tras la interacción del usuario, mantenerla dentro del bundle principal es un desperdicio de recursos. Aquí se explica paso a paso cómo extraer una dependencia y cargarla de forma perezosa usando las capacidades nativas de webpack.

¿Cómo se identificó el problema en el bundle principal?

Antes de optimizar, se resolvió un typo que impedía reproducir el video dentro del modal. En el archivo open-modal.js, el dataset esperado por la librería no era videoID sino VIDEO en mayúsculas seguido de ID [1:08]. Un detalle mínimo que bloqueaba toda la funcionalidad.

Con el modal funcionando, se analizó el empaquetado en modo de producción ejecutando npm run build y luego el servidor en el puerto 5000. El resultado mostraba dos archivos: vendors y main.bundle [2:05]. Al inspeccionar con el bundle analyzer, la librería modal-video aparecía empaquetada dentro del bundle principal de vendors. Esto significa que cada visitante descargaba esa librería aunque jamás hiciera clic en el botón de reproducir.

La conclusión fue clara: modal-video es totalmente innecesaria para la carga inicial de la página y solo se requiere en el instante en que el usuario presiona play [2:42].

¿Cómo funciona el lazy loading con la sintaxis import de webpack?

Webpack permite cargar módulos de forma perezosa mediante imports dinámicos, que devuelven una promesa. En lugar de importar la librería al inicio del archivo, se mueve la importación dentro del bloque del event listener que detecta el clic [3:15].

La sintaxis es directa:

javascript import(/* webpackChunkName: "modal" */ './open-modal').then(({ openModal }) => { openModal(videoID); });

Se elimina el import estático del inicio del archivo.
Se usa import() como función que retorna una promesa.
Al resolverse, webpack entrega el módulo completo; como openModal es un named export, se aplica destructuring de JavaScript para extraerlo [4:15].
El comentario /* webpackChunkName: "modal" */ le indica a webpack el nombre legible del chunk generado [6:12].

¿Por qué se extrajo el videoID a una variable directa?

Dentro de la función que se ejecuta en la promesa, acceder al elemento link del DOM puede provocar problemas de closure en JavaScript [4:38]. La solución es almacenar el videoID en una variable antes de la promesa, de modo que el closure creado por la función asíncrona solo capture un string y no una referencia al nodo del DOM.

¿Qué hace el webpackChunkName?

Sin este comentario especial, webpack genera nombres crípticos como 2.bundle para los chunks dinámicos [5:52]. Al definir webpackChunkName: "modal", el archivo resultante se llama modal.bundle, algo mucho más legible cuando se inspecciona el build de producción [6:38].

¿Cómo se verificó que el lazy loading funciona correctamente?

Al ejecutar el build y levantar el servidor de producción, apareció un error 404 al intentar cargar modal.bundle [7:22]. El navegador buscaba el archivo en una ruta incorrecta: dist/modal.bundle en lugar de /dist/modal.bundle.

El problema estaba en la configuración de publicPath dentro de webpack, que necesitaba terminar con un slash (/) [7:55]. Sin ese carácter final, webpack construía rutas relativas erróneas para los chunks cargados dinámicamente.

Tras corregirlo y reconstruir:

Se recargó la página y se abrió la pestaña Network del navegador.
Al hacer clic en el botón de play, apareció una nueva petición: modal.bundle [8:36].
Ese archivo solo se descargó en ese momento, nunca durante la carga inicial.

Esto confirma que el lazy loading funciona: el bundle principal es más liviano y la librería del modal viaja al navegador únicamente cuando el usuario la necesita.

Esta técnica no depende de ninguna librería mágica. Requiere analizar qué partes del código son prescindibles en la carga inicial y moverlas a chunks dinámicos. Si trabajas con React, puedes lograr algo similar con React.lazy y Suspense [3:27]. Lo importante es evaluar en cada proyecto qué dependencias son candidatas a carga diferida y aplicar el patrón que mejor se adapte a tu stack.

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 Carga de Modales con Lazy Loading en Webpack