Menos Peso, Más Velocidad (React Lazy & React Suspense)

Durante la charla vamos a ver varios temas, algunos más profundos que otros y algunos los veremos en más profundidad que otros. Para empezar, hablare sobre React Lazy y como nos permite realizar Code Splitting utilizando importación dinámica. Veremos qué no se puede usar React Lazy sin también usar React Suspense. Entonces, además de contarles que es y como se usa, les explicare como interactúa con las fases de renderización de los componentes. Hasta acá ya habremos visto muchos temas y en profundidad asíque será necesario hacer un pequeño repaso para poder entender cuándo utilizar estas características y que ventajas y desventajas tiene

Transcript

1. Menos peso Más velocidad React Lazy & React Suspense Lautaro Carro Desarrollador .NET & React www.lautarocarro.com @lauchacarro
2. Agenda • React Lazy • Importación dinámica • React Suspense • Fases de renderización de componentes • Repaso • ¿Cuándo usarlo? • Ventajas y desventajas
3. Nuestro Main.js 37 KB
4. Nuestro Main.js 82 KB
5. Nuestro Main.js 10 MB
6. Nuestro Main.js 62 KB 20 KB Main.chunk.js chunk.js
7. Code Splitting Funcionalidad disponible en sistemas de empaquetamiento para crear múltiples librerías que son cargadas dinámicamente durante la ejecución de tu aplicación.
8. React Lazy Lazy es una función de React que nos facilita realizar importaciones de componentes de manera dinámica. const Button = lazy(() => import('components/Button.jsx'));
9. ¿Qué es la importación dinámica?
10. Importación Dinámica import Button from 'components/Button.js' import(‘modules/utils.mjs).then( module => { module.default(); module.doStuff(); }) Import estático Import dinámico ECMAScript 6
11. Importación Dinámica import(‘assets/images/imageName.jpg’) super()
12. Importación Dinámica Carga Inicial Carga Asincrónica Solo Cuando Sea Necesario Importaciones Estáticas Importaciones Dinámicas
13. React Lazy + Webpack const Button = lazy(() => import('components/Button.jsx')); function lazy<T extends ComponentType<any>>( factory: () => Promise<{ default: T }> ): LazyExoticComponent<T>;
14. React Lazy + Webpack
15. React Lazy + Webpack lazy(() => import('jsx')); lazy(() => import('jsx')); lazy(() => import('jsx')); import ... from 'jsx' import ... from 'jsx' import ... from 'jsx' import ... from 'jsx' import ... from 'jsx'
16. React Lazy + Webpack import React, { lazy } from ‘react' const OtherComponent = lazy(() => import(‘./OtherComponent.jsx')); function MyComponent() { return ( <div> <OtherComponent /> </div> ); }
17. React Lazy + Webpack import React, { lazy } from ‘react' const OtherComponent = lazy(() => import(‘./OtherComponent.jsx')); function MyComponent() { return ( <div> <OtherComponent /> </div> ); }
18. React Lazy + Webpack
19. React Suspense React Suspense es un componente nativo que nos da una forma estándar de poder cargar datos asíncronos en nuestros componentes. <Suspense fallback={<div>...Loading </div>}> </Suspense>
20. Las 3 Fases del Render
21. Fase Render En esta fase se realiza todo el proceso para modificar el DOM virtual y con la implementación de React Fiber se puede pausar, restaurar o abortar el procesos de esta fase. render() getDerivedStateFromProps() constructor() shouldComponentUpdate()
22. Fase PreCommit En esta fase se realizan los cálculos para averiguar las diferencias entre el DOM virtual y el DOM. getSnapshotBeforeUpdate()
23. Fase Commit En esta fase se realiza el proceso actualizar el DOM con las diferencias detectadas en el PreCommit. componentDidMount() componentDidUpdate() componentWillUnmount()
24. Pausar Fase Render
25. Pausar Fase Render <OtherComponent />
26. import React, { lazy, Suspense } from ‘react' const OtherComponent = lazy(() => import(‘./OtherComponent.jsx')); function MyComponent() { return ( <Suspense fallback={<div>...Loading </div>}> <OtherComponent /> </Suspense> ); } React Lazy + Suspense
27. import React, { lazy, Suspense } from ‘react' const OtherComponent = lazy(() => import(‘./OtherComponent.jsx')); const AnotherComponent = lazy(() => import(‘./AnotherComponent.jsx')); function MyComponent() { return ( <Suspense fallback={<div>...Loading </div>}> <OtherComponent /> <AnotherComponent /> </Suspense> ); } React Lazy + Suspense
28. React Lazy + Suspense import React, { lazy, Suspense } from ‘react' const OtherComponent = lazy(() => import(‘./OtherComponent.jsx')); const AnotherComponent = lazy(() => import(‘./AnotherComponent.jsx')); function MyComponent() { return ( <Suspense fallback={<div>...Loading Other </div>}> <OtherComponent /> </Suspense> <Suspense fallback={<div>...Loading Another </div>}> <AnotherComponent /> </Suspense> ); }
29. Repaso Con React Lazy creo librerías separadas del componente para importarlo dinámicamente. Con React Suspense esperamos a que dichos componentes se carguen mientras se muestra otro importado estáticamente.
30. ¿Cuándo Usarlo? • Componentes de poco uso • Páginas de pocas visitas • Componentes muy grandes
31. Ventajas • División de código • Cargas iniciales más rápidas • Mejora en UX
32. Desventajas • Un archivo necesita 2 request • Mal uso lleva a N request
33. Conclusión React Lazy y Suspense consiguen una gran mejora de rendimiento manipulando el ciclo de vida y facilitandonos el desarrollo al usar importación dinámica. Vale la pena considerar usarlos tanto en nuevos como ya existentes proyectos.
34. ¿ Preguntas ?
35. Muchas Gracias !!! Lautaro Carro Desarrollador .NET & React www.lautarocarro.com @lauchacarro