Tweet
Tweet

Slide 1

Slide 1 text

Menos peso Más velocidad React Lazy & React Suspense Lautaro Carro Desarrollador .NET & React www.lautarocarro.com @lauchacarro

Slide 2

Slide 2 text

Agenda ● React Lazy ● Importación dinámica ● React Suspense ● Fases de renderización de componentes ● Repaso ● ¿Cuándo usarlo? ● Ventajas y desventajas

Slide 3

Slide 3 text

Nuestro Main.js 37 KB

Slide 4

Slide 4 text

Nuestro Main.js 82 KB

Slide 5

Slide 5 text

Nuestro Main.js 10 MB

Slide 6

Slide 6 text

Nuestro Main.js 62 KB 20 KB Main.chunk.js chunk.js

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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'));

Slide 9

Slide 9 text

¿Qué es la importación dinámica?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Importación Dinámica import(‘assets/images/imageName.jpg’) super()

Slide 12

Slide 12 text

Importación Dinámica Carga Inicial Carga Asincrónica Solo Cuando Sea Necesario Importaciones Estáticas Importaciones Dinámicas

Slide 13

Slide 13 text

React Lazy + Webpack const Button = lazy(() => import('components/Button.jsx')); function lazy>( factory: () => Promise<{ default: T }> ): LazyExoticComponent;

Slide 14

Slide 14 text

React Lazy + Webpack

Slide 15

Slide 15 text

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'

Slide 16

Slide 16 text

React Lazy + Webpack import React, { lazy } from ‘react' const OtherComponent = lazy(() => import(‘./OtherComponent.jsx')); function MyComponent() { return (
); }

Slide 17

Slide 17 text

React Lazy + Webpack import React, { lazy } from ‘react' const OtherComponent = lazy(() => import(‘./OtherComponent.jsx')); function MyComponent() { return (
); }

Slide 18

Slide 18 text

React Lazy + Webpack

Slide 19

Slide 19 text

React Suspense React Suspense es un componente nativo que nos da una forma estándar de poder cargar datos asíncronos en nuestros componentes. ...Loading }>

Slide 20

Slide 20 text

Las 3 Fases del Render

Slide 21

Slide 21 text

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()

Slide 22

Slide 22 text

Fase PreCommit En esta fase se realizan los cálculos para averiguar las diferencias entre el DOM virtual y el DOM. getSnapshotBeforeUpdate()

Slide 23

Slide 23 text

Fase Commit En esta fase se realiza el proceso actualizar el DOM con las diferencias detectadas en el PreCommit. componentDidMount() componentDidUpdate() componentWillUnmount()

Slide 24

Slide 24 text

Pausar Fase Render

Slide 25

Slide 25 text

Pausar Fase Render

Slide 26

Slide 26 text

import React, { lazy, Suspense } from ‘react' const OtherComponent = lazy(() => import(‘./OtherComponent.jsx')); function MyComponent() { return ( ...Loading }> ); } React Lazy + Suspense

Slide 27

Slide 27 text

import React, { lazy, Suspense } from ‘react' const OtherComponent = lazy(() => import(‘./OtherComponent.jsx')); const AnotherComponent = lazy(() => import(‘./AnotherComponent.jsx')); function MyComponent() { return ( ...Loading }> ); } React Lazy + Suspense

Slide 28

Slide 28 text

React Lazy + Suspense import React, { lazy, Suspense } from ‘react' const OtherComponent = lazy(() => import(‘./OtherComponent.jsx')); const AnotherComponent = lazy(() => import(‘./AnotherComponent.jsx')); function MyComponent() { return ( ...Loading Other }> ...Loading Another }> ); }

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

¿Cuándo Usarlo? ● Componentes de poco uso ● Páginas de pocas visitas ● Componentes muy grandes

Slide 31

Slide 31 text

Ventajas ● División de código ● Cargas iniciales más rápidas ● Mejora en UX

Slide 32

Slide 32 text

Desventajas ● Un archivo necesita 2 request ● Mal uso lleva a N request

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

¿ Preguntas ?

Slide 35

Slide 35 text

Muchas Gracias !!! Lautaro Carro Desarrollador .NET & React www.lautarocarro.com @lauchacarro