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

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesi贸n a prueba de IA

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

0 D铆as
3 Hrs
22 Min
38 Seg

Code Splitting

23/38
Resources

What is code splitting and why is it important?

Code splitting is a technique that divides the bundle of an application into smaller, more manageable parts. Instead of sending a single large file to the browser, it is split into several segments, each one loading the necessary parts only when the user requires them. This is essential for large web applications, as it improves performance and reduces load time. Several frameworks such as Angular, Next.js and Gatsby already take advantage of code splitting, automatically dividing the code according to the application paths.

How do the different code splitting strategies work?

Page splitting:
Modern frameworks perform code splitting based on application paths. Each page becomes an independent bundle, so that only the resources strictly necessary for each view are loaded.

Separation of code and dependencies:
Another effective strategy is to split the bundle into two parts: the application code and the external dependencies or libraries, also known as vendors. This allows greater control and optimization in the management of resources, offering more efficient updates and uploads.

How do we use Webpack for code splitting?

Webpack is a powerful tool for managing JavaScript bundles. By implementing code splitting with Webpack, you can significantly optimize project performance. To do this, we need to configure its optimization to split files properly.

Basic steps:

  1. Webpack configuration:

    • Access the Webpack configuration file and remove any unneeded code, such as redundant logs.
    • Implement the optimizations for code splitting that Webpack provides.
  2. Execution and review:

    • Run the npm run build command to see the results of your code splitting.
    • Check the generated files, which should include the main.bundle.js for the application code and another bundle for the libraries or vendors.
  3. Update the HTML:

    • Modify the scripts in your HTML to load the newly generated bundles in the correct order: libraries first, then the main code.
  4. Final testing:

    • Run your project to make sure everything works correctly.
    • Use development tools such as the browser's "Network" to verify the correct loading of the bundles.

What are the benefits of code splitting for browsers?

The main advantage of code splitting is its integration with browser caching strategies. External libraries or vendors tend to change little between deployments, so they can be cached by the browser, significantly reducing the number of requests to the server. This optimizes load and improves the user experience, allowing only the core application code to be updated when necessary.

Specific benefits:

  • Optimized initial load: Only what is essential for each view is sent to the client.
  • Reduced load on the server: Decreases the number of requests thanks to caching.
  • Improved user experience: By reducing load times, users get a smoother and faster experience.

By applying these principles effectively, you can maximize the performance of complex applications, offering a more responsive and efficient user experience. We continue to learn and improve on the road to advanced web development!

Contributions 9

Questions 3

Sort by:

Want to see more contributions, questions and answers from the community?

馃徆 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