Moment vs date-fns

Clase 4 de 23Curso de Rendimiento en Angular

Resumen

¿Qué es Bundlephobia?

Bundlephobia es una herramienta excepcionalmente útil que ayuda a los desarrolladores a evaluar las bibliotecas JavaScript que utilizan en sus proyectos. Al hacerlo, ofrece una visión detallada del "peso" de cada paquete en su aplicación, permitiendo tomar decisiones informadas sobre la dependencia de ciertas librerías.

¿Cómo funciona Bundlephobia?

  1. Evaluación de paquetes: Permite subir package.json y visualizar una estadística del tamaño de las librerías.
  2. Peso en bytes: Muestra el costo en bytes de cada librería y cuánto debería pesar.
  3. Alternativas sugeridas: Proporciona recomendaciones de otras librerías que ofrecen un tamaño menor o similar, optimizando así el rendimiento.

¿Por qué es importante analizar las librerías?

  • Mejora del rendimiento: Minimizar el tamaño de las librerías incluidos acelera los tiempos de carga de las aplicaciones web.
  • Optimizaciones en Descargas: Un paquete más pequeño disminuye el tiempo de descarga, mejorando la experiencia del usuario.
  • Sustitución inteligente de librerías: Encontrar alternativas más eficientes puede reducir significativamente el impacto en el peso total de la aplicación.

Explorando alternativas con Bundlephobia

Explorar alternativas ligeras a las librerías comunes es una estrategia crucial para optimizar las aplicaciones.

¿Qué librerías pueden ser reemplazadas?

  1. Moment.js: Pesada herramienta para manipulación de fechas.
  2. JSPDF: Utilizada para la generación de documentos PDF en el lado cliente.

Alternativas ligeras:

  • Date-fns como sustituto de Moment.js: Ofrece una forma más eficiente de manipulación de fechas, sin cargas innecesarias debido a su programación basada en funciones en lugar de objetos.
  • Servicios Backend para PDF: Utilizar un backend en vez de JSPDF puede disminuir el peso considerablemente.

Implementación práctica de alternativas

Reemplazar Moment.js con Date-fns

El proceso implica desinstalar Moment.js y sustituirlo con Date-fns, un paquete más ligero y eficiente.

npm uninstall moment
npm install date-fns

Cambiar el código:

En lugar de utilizar métodos de Moment.js, se deben importar funciones específicas de Date-fns, como addDays y format.

import { addDays, format } from 'date-fns';

// Agregar días a una fecha actual
let date = new Date();
date = addDays(date, 20);

// Formatear fecha
const formattedDate = format(date, 'yyyy-MM-dd');

Deshacerse de JSPDF

En lugar de generar PDF en el cliente, delegar esta tarea a un servidor backend es una solución eficaz.

  • Aprovechar librerías de servidor que utilizan Node.js o Python para la creación de PDF.
  • El tráfico de peso se desplaza a un backend con más recursos y se entrega el archivo terminado al cliente.

Beneficios de una aplicación más ligera

Reducir el tamaño de paquetes y optar por alternativas más pequeñas no solo mejora la carga de la aplicación, sino asegura lo siguiente:

  • Tiempo de carga más rápido: Una aplicación más ligera mejora significativamente la experiencia del usuario.
  • Menor uso de ancho de banda: Usuarios con conexiones más lentas experimentarán tiempos de espera reducidos.
  • Escalabilidad: Aplicaciones optimizadas son más fáciles de ajustar y mantener a medida que crecen.

Incentivar el hábito de revisar y evaluar continuamente las librerías utilizadas con herramientas como Bundlephobia asegura no solo aplicaciones más eficientes sino también un desarrollo más consciente y responsable.