¿Cuáles son las diferencias entre React.lazy y @loadable/components?

Antes de discutir la diferencia entre React.lazy y @loadable/components , hablemos de qué son y por qué los necesitamos. Tanto React.lazy como @loadable/components se utilizan principalmente para el proceso de Code-Splitting . 

División de código: la división de código es una técnica de optimización compatible con paquetes como Webpack, Rollup y Browserify (a través de factor-bundle) que nos permite dividir nuestro código en varios paquetes o fragmentos que se pueden cargar dinámicamente en tiempo de ejecución bajo demanda o en paralelo. 

Es una forma eficiente de reducir el tamaño de su paquete de aplicaciones porque simplemente estamos «cargando de forma diferida» las cosas que el usuario necesita actualmente.

Aunque no hemos reducido la cantidad total de código en nuestra aplicación de esta manera, hemos evitado cargar el código que el usuario quizás nunca necesite. Lo que a su vez reduce la cantidad de código necesario durante la carga inicial y mejora drásticamente el tiempo de carga general de su aplicación.

React implementa la división de código: React admite la división de código de forma inmediata con React.lazy desde la versión 16.6.0 .

Ha sido una práctica común desde entonces dividir nuestros componentes en una aplicación React. Sin embargo, solo dividir no es suficiente, debe poder esperar a que se cargue el componente (mientras muestra una interfaz de usuario alternativa durante la carga) y también manejar cualquier error potencial.

Es por eso que necesitamos usar límites de suspenso y error con él.

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';
  
const SomeComponent = React.lazy(() => import('./SomeComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
  
const MyComponent = () => (
    <div>
        <MyErrorBoundary>
            <Suspense fallback={<div>Loading...</div>}>
                <section>
                    <SomeComponent />
                    <AnotherComponent />
                </section>
            </Suspense>
        </MyErrorBoundary>
    </div>
);

Como podemos ver en el ejemplo anterior, React.lazy toma una función que llama a una importación dinámica() y devuelve una Promesa que se resuelve en un módulo con una exportación predeterminada que contiene un componente React. Luego, el componente perezoso se representa dentro de un componente Suspenso , lo que nos permite mostrar contenido alternativo (como un indicador de carga) mientras esperamos que se cargue el componente perezoso. Un límite de error también se usa para manejar cualquier error que pueda ser causado por un problema de red o una razón similar. 

@loadable/component: aunque React.lazy con Suspense es la solución recomendada para dividir código, tiene algunas limitaciones. React.lazy y Suspense aún no están disponibles para la representación del lado del servidor . Entonces, si desea dividir el código en una aplicación renderizada por el servidor, ahí es cuando entra en juego @loadable/component .

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
    return (
        <div>
            <OtherComponent />
        </div>
    )
}

Entonces, ¿cuáles son algunas de las principales diferencias entre ellos? 

SSR: @loadable/component proporciona una solución completa para hacer posible la representación del lado del servidor, mientras que React.lazy no es una opción cuando se trata de la representación del lado del servidor. Debido a que Suspense no está disponible en Server-Side y React.lazy solo puede funcionar con Suspense.

Suspense: aunque Suspense es compatible tanto con @loadable/component como con React.lazy, la diferencia entre ellos es que @loadable/component también se puede usar sin Suspense.

const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
    return (
        <div>
            <OtherComponent fallback=
                  {<div>Loading...</div>} />
        </div>
    )
}

División de bibliotecas: @loadable/component admite la división de bibliotecas mediante accesorios de representación, lo que no es posible con React.lazy.

import loadable from '@loadable/component'
const Moment = loadable.lib(() => import('moment'))
function FromNow({ date }) {
    return (
        <div>
            <Moment fallback={date.toLocaleDateString()}>
                {({ default: moment }) => 
                    moment(date).fromNow()}
            </Moment>
        </div>
    )
}

Importación dinámica completa: Webpack admite importaciones dinámicas completas o división de código agresiva. Puede usarlos para crear un componente cargable reutilizable pasando un valor dinámico a la función de importación dinámica().

import loadable from '@loadable/component'
const AsyncPage = loadable(props => 
    import(`./${props.page}`))
function MyComponent() {
  return (
    <div>
      <AsyncPage page="Home" />
      <AsyncPage page="Contact" />
    </div>
  )
}