Entendiendo el rendimiento

1

Todo lo que aprenderás sobre optimización web

2

¿Vale el esfuerzo optimizar un sitio web?

3

¿Cuándo realmente un sitio es rápido o lento?

Antes de optimizar...

4

Aprendiendo a medir

5

User Performance Metrics

6

Nuestro proyecto

Crítical Rendering Path

7

Etapas de render del navegador

8

Network waterfall y recursos que bloquean el navegador

9

Priorización de recursos

10

Preloading y prefetching de recursos

11

Fases Paint y Layout del Critical Render Path

CSS

12

Detectando Paints costosos y optimizando animaciones

13

Bloqueos y complejidad en selectores

WebFonts

14

WebFonts y su impacto en redimiento

Imágenes, Iconos y SVG

15

Imágenes, formato y compresión

16

Imágenes y compresión

17

¿WebFont, Imagen o SVG?

18

Técnicas avanzadas con Lazy Loading

19

Técnicas avanzadas con Responsive Loading

Aplicaciones JavaScript

20

JavaScript y aplicaciones modernas y Utilizando un servidor de producción

21

Analizando el bundle de la aplicación

22

Reduciendo el tamaño del bundle

23

Code Splitting

24

Lazy Module Loading

25

Llevando los listeners a otro nivel

26

Instalando Modal video

27

Lazy loading del modal

28

Moviendo la carga de rendering hacia el servidor: Server Side Rendering

29

Aplicando SSR

30

Pre-renderizando el contenido: Static Generation

Caché

31

Cómo funciona el Caché de recursos y CDN

32

Deploy en Netlify y automatización de contenido en GitHub Actions

33

Aplicando Github Actions

34

Interceptando los requests del navegador con Service Workers

Performance Budget

35

Performance budget y auditorias automatizadas

36

Automatizando una auditoría con Lighthouse CI

37

Medidas reales y monitoreo constante

Conclusiones

38

Conclusiones

No tienes acceso a esta clase

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

Reduciendo el tamaño del bundle

22/38
Recursos

Aportes 17

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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.

⬇️ Reduciendo el tamaño del bundle

<h4>Recursos</h4>

BundlePhobia

<h4>Apuntes</h4>
  • Podemos usar soluciones online para analizar que puede estar pesando dentro de nuestra aplicación una de ellas es bundle Phobia
  • Existen librerías que son “Tree Shakable”
    • Ayudan al empaquetador de solo sacar lo que se necesitan
  • Nos podemos ayudar de bundle Phobia para encontrar paquetes que sean más pequeños a la hora de hacer el bundle de nuestra aplicación

RESUMEN: Para reducir el tamaño de nuestro bundle es importante tomar en cuenta las dependencias que usamos y encontrar la forma de reducir el tamaño ya sea usando las funciones necesarias si es que la libreria es tree shakable o buscando una alternativa liviana

Probé el destructuring y no se redujo el tamaño inicial. Con la segunda opción “lodash/get” sí redujo el tamaño.

Tree Shaking es la onda! 😄

Pense que iba a optimizar moment
😃

**Esto fue asombroso **

Impresionante, que curso tan bueno. Felicitaciones!!!

que Interesante, me encanta este curso

Mi resultado: 😮

Al final me quedo con 31.7 kb

No importa si varia el resultado de esa manera verdad?
Me gustaria feedback, gracias 😄

utilizar lodash solo para eso, es como cortar plantas con una motosierra

Excelente clase.

Tengo una duda, para cuando utilizamos timepicker y datepicker ,… normalmente lo suelo usar con bootstrap y hacen uso de moment.js cuando los uso que me recomendarias para poder quitar moment y usar algo mas ligero… ya que he buscado y encontre pickdate.js pero no es muy bueno para las fechas… alguna sugerencia? para optimizar nuestros datepickers y timepickers . Gracias

Sin duda, es la clase del curso hasta ahora que más me ha impactado, es jodidamente maravilloso el tamaño final del bundle optimizado respecto al inicial.

👌

Excelente clase!

Con BundlePhobia nos podemos ayudar para buscar las librerías similares a moment y así escoger la más eficiente.
Yo por ejemplo use dayjs y logre reducirla hasta 23.9 Kb

https://bundlephobia.com/[email protected]

Waoo 😱 esto si que es optimizar