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 rendimiento

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

Code Splitting

23/38
Recursos

Aportes 9

Preguntas 3

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

ūüŹĻ Code Splitting

<h4>Ideas/conceptos claves</h4>

Code splitting por paginas es una manera de hacer code splitting el cual consiste en cuando el usuario cargue una página en específico el bundle que se enviara al navegador sera una sola fracción y lo que esa página necesite

<h4>Apuntes</h4>
  • Si bien podemos reducir el tama√Īo de nuestros bundle, llegar√° un momento donde no tendr√° m√°s reducci√≥n
  • En ese momento debemos tomar otras estrategias y el code splitting es una de ellas
  • En vez de tener un bundle gigante de nuestra aplicaci√≥n, lo que hace el code splitting sera dividirlo en diferentes partes para que sea mucho m√°s f√°cil y pese menos a la hora de enviarlo al navegador
    • Frameworks como Angular, Next y Gatsby se genera un code splitting basado en paginas
  • Otra t√©cnica es dividir el c√≥digo de las librer√≠as [vender] de nuestro bundle final
    • Esta t√©cnica es beneficiosa en el sentido de que los navegadores hacen cache de los archivos, por lo cual los vendors se quedaran en cache ya que estos no se suelen actualizar mucho.
    • Como efecto reduciremos la cantidad de requests

RESUMEN: Podemos ver que el code splitting es dividir el código, es beneficioso el uso que se le quiera dar, ya que se puede implementar de diferentes formas

ūüĒé Si corren el comando de an√°lisis de nuestro bundle, nos podemos dar cuenta que la gr√°fica se ve diferente!

Esta es una de las t√©cnicas m√°s importantes para utilizar en react, aparte de separar p√°ginas de una SPA por ejemplo, tambi√©n se utiliza para separar componentes y cargarlos de manera diferida para que la p√°gina cargue mucho m√°s r√°pido, en react existe React.lazy para importar cosas que no son tan importantes de cargar al principio (En caso de aplicaciones peque√Īas como landings) o para separar las p√°ginas, en caso de utilizar alg√ļn router para una SPA (En aplicaciones un poco m√°s complejas para no descargar todas las p√°ginas del bundle), y se utiliza junto Suspense para mostrar un loader mientras carga el resto de la p√°gina.

Code Splitting

Dividir el codigo en pedazos

optimization : {
    splitChunks: {
      chunks: 'all',
    },
  },

.
filename: '[name].bundle.js',
.
index.html

<script async src="dist/vendors~main.bundle.js"></script>
    <script async src="dist/main.bundle.js"></script>

.
Este metodo es fundamental para la caché

Para los que les aparece el siguiente error:

Error: Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks 179 and 
581)

Se soluciona con el cambiando el filename en

[name].js

Este art√≠culo ense√Īa c√≥mo hacer Code Splitting con Vite!

A m√≠ no me sali√≥ vendor-main sino, 581, pero agrego ese n√ļmero y no sale nada.

ūüĎĆ

hello