División de código en React

Code-Splitting es una función compatible con paquetes como Webpack, Rollup y Browserify que pueden crear múltiples paquetes que se pueden cargar dinámicamente en tiempo de ejecución.
A medida que los sitios web crecen y profundizan en los componentes, se vuelven más pesados. Este es especialmente el caso cuando se incluyen bibliotecas de terceros. Code Splitting es un método que ayuda a generar paquetes que pueden ejecutarse dinámicamente. También ayuda a que el código sea eficiente porque el paquete contiene todas las importaciones y archivos necesarios.
La agrupación y su eficiencia: La agrupación es el método de combinar archivos importados en un solo archivo. Se realiza con la ayuda de Webpack, Rollup, Browserify, ya que pueden crear muchos paquetes que se pueden cargar dinámicamente en tiempo de ejecución.
Con la ayuda de la división de código, se puede implementar la ‘carga diferida’, lo que significa simplemente usar el código que se necesita actualmente.

• La forma predeterminada de importar de la siguiente manera: 
   

import { add } from './math';
console.log(add(x, y));
 
// Here x, y are two numbers

• Usando la división de código, esto se puede hacer de la siguiente manera: 

import("./math").then(math => {
  console.log(math.add(x, y));
});
 
// Here x, y are two numbers

Tan pronto como Webpack obtiene este tipo de sintaxis, la división de código se inicia automáticamente. Al usar la aplicación Create React, ya está configurada y se puede usar de inmediato.
Se debe seguir la guía de Webpack sobre división de código si se usa Webpack. Las instrucciones se pueden encontrar en https://webpack.js.org/guides/code-splitting/.
Cuando se utiliza Babel, debe asegurarse de que Babel no esté transformando la sintaxis de importación, sino que pueda analizarla dinámicamente. Esto se puede hacer usando el paquete https://classic.yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import.
React.lazy y suspenso:Como tanto React.lazy como Suspense aún no están disponibles para renderizar en el servidor, se recomienda usar https://github.com/gregberge/loadable-components para dividir el código en una aplicación renderizada por el servidor. React.lazy es útil para representar la importación dinámica como un componente regular.
Antes: 

import Component from './Component';

Después: 

const Component = React.lazy(() => import('./Component'));

El paquete se cargará solo y contiene el componente cuando este componente se represente primero. 
El componente perezoso debe renderizarse dentro del componente de suspensión, lo que ayuda a reflejar algún contenido alternativo mientras se carga el componente perezoso.

import React, { Suspense } from 'react';
const Component = React.lazy(() => import('./Component'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
    </div>);
}

El accesorio alternativo puede aceptar cualquier elemento de React que se procesará mientras se espera la carga del Componente. El componente de suspenso se puede colocar en cualquier lugar por encima del componente perezoso. Además, se pueden envolver múltiples componentes perezosos con un solo componente de suspenso.

import React, { Suspense } from 'react';
 
const ComponentOne =
 React.lazy(() => import('./ComponentOne'));
const ComponentTwo =
 React.lazy(() => import('./ComponentTwo'));
function MyComponent() {
  return (
<div><Suspense fallback={<div>Loading...</div>}></div>);
}

Límites de error: cuando algunos módulos no se cargan debido a algún problema, se activará un error. Estos errores se pueden manejar adecuadamente y brindar una buena experiencia al usuario mediante el uso de una página de error adecuada.

import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';
const ComponentOne = React.lazy(() =>
 import('./ComponentOne'));
const ComponentTwo = React.lazy(() =>
 import('./ComponentTwo'));
const MyComponent = () => (
  <div>
    <Suspense fallback={<div>Loading...</div>}>
  </div>
);

División de código basada en rutas: puede ser difícil implementar la división de código en el código, los paquetes se pueden dividir de manera uniforme, lo que mejorará la experiencia para el usuario.
Ejemplo: 

import React from 'react';
import Suspense from 'react';
import lazy from 'react';
import {Route, Switch, BrowserRouter }
            from 'react-router-dom';
 
const HomePage = lazy(() =>
 import('./routes/HomePage'));
const AboutUs = lazy(() =>
 import('./routes/AboutUs'));
const App = () =>
 (<Suspense fallback={<div>Loading...</div>}>
);

Exportaciones con nombre: React.lazy actualmente solo admite exportaciones predeterminadas. Se debe crear un módulo intermedio que vuelva a exportar por defecto si se quiere importar un módulo que use exportaciones con nombre. Esto asegura el funcionamiento de la sacudida del árbol y evita la extracción de componentes no utilizados.

// Components.js
export const Component = /* ... */;
export const MyUnusedComponent = /* ... */;
 
// Component.js
export { Component as default } from "./Components.js";
 
// MyApp.js
import {React, lazy} from 'react';
const Component = lazy(() => import("./Component.js"));