Optimización de JavaScript para Producción Web

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:0011:20

Optimización de JavaScript para Producción Web

Curso de Optimización Web

Clase 20 de 38

Clase 20 / 38

Recursos

¿Qué papel juega JavaScript en la web moderna?

El JavaScript ha transformado la web moderna, siendo la base de tecnologías como React, Sville, Angular y Vue. Cada vez es más sencillo integrar funcionalidades avanzadas gracias a paquetes que están al alcance de un simple npm install. Sin embargo, esta facilidad puede llevarnos a sobrecargar nuestras páginas con numerosas dependencias innecesarias.

¿Por qué es importante optimizar las dependencias de JavaScript?

A pesar de los avances en herramientas y técnicas, el costo de un mal uso del JavaScript puede ser alto para la experiencia del usuario. Según un informe de 2018, el tamaño promedio de las páginas web alcanza los 350 kilobytes, y el tiempo de espera para que una aplicación sea interactiva puede superar los 15 segundos. Esto genera frustración y una mala experiencia para quienes visitan nuestras páginas.

¿Cómo preparar un proyecto JavaScript para producción?

Al optimizar para producción, debemos asegurarnos de ajustar nuestro entorno y herramientas correctamente. A continuación, vamos a ver cómo hacer esto utilizando Webpack y un servidor adecuado.

¿Qué pasos seguir para compilar Webpack para producción?

Uso de scripts de compilación:
- Dentro del archivo package.json, es necesario establecer un script de build. Este script se encarga de compilar Webpack.
- Incluye parámetros adicionales para ejecutar en modo producción, como configurar node_env a production.
Activar optimizaciones de Webpack:
- Webpack tiene una opción -p que realiza dos acciones cruciales:
  1. Establece la variable de entorno para producción.
  2. Activa un modo de producción, donde Webpack optimiza el código para reducir su tamaño y mejorar su rendimiento.

{
  "scripts": {
    "build": "webpack -p"
  }
}

Al aplicar estas configuraciones, el tamaño del bundle puede reducirse significativamente, como de 1.5 megabytes a un más manejable 340 kilobytes.

¿Qué servidor es adecuado para producción?

Para enviar nuestro bundle optimizado a los usuarios, es crucial utilizar un servidor adecuado. Aquí es donde el paquete serve entra en acción.

Instalación de Serve:
- Se puede instalar via npm install serve y añadirse a las dependencias de desarrollo.
Configuración del script:
- Crea un script de serve en package.json para ejecutar el paquete serve y servir el contenido desde el directorio actual.

{
  "scripts": {
    "serve": "serve ."
  }
}

¿Cómo verificar la eficacia de la optimización?

Una vez implementados estos cambios, es recomendable ejecutar herramientas de auditoría como Lighthouse para analizar la mejora en el rendimiento de la web. Esto ayudará a verificar que los tiempos de carga sean óptimos y que la experiencia del usuario esté mejorando.

¿Qué más se puede hacer para mejorar el rendimiento?

Si bien la optimización inicial puede ser notable, como mostrar una reducción de kilobytes del bundle, aún existen oportunidades para seguir afinando el rendimiento. Analizar las cargas no esenciales y modularizar correctamente el código son los próximos pasos cruciales para lograr una experiencia de usuario excelente. ¡Manos a la obra y a seguir optimizando!