Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

3275e53a5e20a36e5557ae86a69ca8ba?s=128

Lautaro Carro

August 29, 2019
Tweet

More Decks by Lautaro Carro

Other Decks in Programming

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