Descubra cómo la división de código puede mejorar el rendimiento y la velocidad de su aplicación React.

¿Su aplicación React es demasiado lenta o tarda demasiado en cargarse? Si es así, es posible que desee utilizar una técnica conocida como división de código. Esta técnica es muy efectiva para mejorar la velocidad de carga y el rendimiento de las aplicaciones React. Pero, ¿qué es la división de código? y como se hace?

¿Qué es la división de código?

Una aplicación típica de React comprende docenas de componentes (y código). Pero no necesita cargar la mayoría de estos componentes cuando los carga por primera vez. La división de código implica dividir las diferentes partes de su aplicación y cargarlas solo cuando sea necesario. Esto es mucho más eficiente que cargar toda la aplicación a la vez.

Considere una aplicación React que tiene tres páginas: la página de inicio, la página acerca de y la página de productos. Cuando estás en la página de inicio, no tiene sentido cargar la página acerca de o la página de productos. Porque todavía no estás en esas páginas. La idea de dividir el código es asegurarse de cargar el código solo cuando sea necesario.

instagram viewer

Abra una página web en su navegador web y luego abra DevTools (puede hacer clic en F12 en su teclado para abrirlo en Google Chrome). A continuación, vaya a la pestaña Fuente. Allí encontrará todo el código que se descarga a medida que navega a la página. Sin dividir el código, el navegador descarga todos los archivos de su proyecto en la carga de la página inicial. Esto puede ralentizar su sitio web si contiene muchos archivos.

La división de código se vuelve especialmente útil a medida que su proyecto comienza a crecer más y más. Esto se debe a que la descarga de todos los archivos de la aplicación a la vez puede llevar mucho tiempo. Así que dividir eso va a ser muy beneficioso.

La mejor parte de la división de código es que puede retrasar la carga de componentes y funciones. Nuestro guía introductoria sobre ReactJS explica los componentes y funciones en profundidad en caso de que necesite un repaso.

Funciones de división de código: uso de la importación dinámica

Considere la siguiente situación. Quieres que tu página de inicio tenga un botón. Cuando hace clic en el botón, desea alertar la suma de 2 y 2 (que es 4). Entonces creas un Inicio.js y defina la vista de su página de inicio.

En este caso, tienes dos opciones. Primero, puede importar el código para agregar los números en la parte superior de la Inicio.js archivo. Pero aquí está el problema. Si tuviera que importar la función en la parte superior del archivo, el código se cargará incluso cuando no haya hecho clic en el botón. Un mejor enfoque será cargar el suma() función sólo cuando hace clic en el botón.

Para lograr esto, deberá realizar una importación dinámica. Esto significa que importará el suma() función en línea en el elemento de botón. Aquí está el código para el mismo:

exportarpor defectofunciónHogar() { 
devolver ( 
"Hogar"> 
Página de inicio</h1>

Ahora el navegador solo descargará el suma.js módulo al hacer clic en el botón. Esto mejora el tiempo de carga de la página de inicio.

Componentes de división de código: uso de React.lazy y Suspense

Puede dividir componentes en React usando el perezoso() función. El mejor lugar para realizar la división de código sería dentro de su enrutador. Porque aquí es donde asigna componentes a rutas en su aplicación. Puedes leer nuestra guía en cómo crear una aplicación de una sola página con React Router si necesita un repaso.

Supongamos que su aplicación tiene un Hogar, Acerca de, y productos componente. cuando estas en el Hogar componente, no tiene sentido cargar el Acerca de componente o el productos componente. Así que necesitas separarlos del Hogar ruta. El siguiente código demuestra cómo lograrlo:

En primer lugar, debe importar las funciones y los componentes necesarios desde el reaccionar y reaccionar-enrutador-dom módulos:

importar { Rutas, Ruta, Salida, Enlace } de"reaccionar-router-dom";
importar { perezoso, suspenso } de"reaccionar";

A continuación, debe importar los componentes dinámicamente utilizando el perezoso() función:

constante Inicio = perezoso(() =>importar("./componentes/Inicio"));
constante Acerca de = perezoso (() =>importar("./componentes/Acerca de"));
constante Productos = perezoso(() =>importar("./componentes/Productos"));

A continuación, configure el diseño (menú de navegación). Utilizar el componente para representar el componente que corresponde a la ruta actual (Hogar, Acerca de, o productos componente):

funciónenvoltorio de navegación() {
devolver (
 <>

Puedes ver que envolvemos los componentes dentro. Esto le dice a React que todo lo que hay dentro tiene el potencial de cargarse de forma diferida, lo que significa que es posible que no esté disponible de inmediato. Por esta razón, el Suspenso componente tiene un retroceder propiedad. En nuestro caso, el valor es un simple texto que dice "Cargando...". Entonces, mientras se descarga cada una de las páginas, dirá cargando en la pantalla.

Finalmente, configure la ruta:

exportarpor defectofunciónaplicación() {
devolver (

"/" elemento={}>
"/" elemento={} />
"/productos" elemento={} />
"/acerca de" elemento={} />
 </Route>
 </Routes>
 );
}

Ahora, cuando visita la página de inicio, el navegador carga solo el Inicio.js archivo. De la misma manera, al hacer clic en el Acerca de enlace en el menú de navegación para visitar la página Acerca de, el navegador carga solo el Acerca de.js archivo. Esto es lo mismo para la página de Productos.

División de código condicional

A menudo, puede tener contenido en su página que solo se aplica a ciertos usuarios. Por ejemplo, en su página de inicio, puede tener una sección con datos de administración que sea exclusiva para los usuarios administradores. Este podría ser un panel de administración que se muestra para los usuarios administradores, pero no para los usuarios normales.

En este caso, no querrá mostrar todos esos datos cada vez. En este caso, puede usar la técnica de división de código para asegurarse de mostrar esa información solo si esta persona es un administrador.

Así es como se vería ese código:

importar { perezoso, suspenso } de"reaccionar";
constante AdminData = perezoso (() =>importar("./AdminData"));
exportarpor defectofunciónHogar() { 
constante [isAdmin, setIsAdmin] = useState(FALSO)


devolver ( 


"Hogar"> 
Página de inicio</h1>




Cargando...</h1>}>
 {esAdministrador? <AdminData />: <h2> No el administrador h2>} 
 </Suspense>
 </div> 
 ); 
}

Ahora, al hacer clic en el botón de alternancia, esAdmin se establecerá en verdadero. Como resultado, la aplicación mostrará el que se está cargando perezosamente. Pero si no es un usuario administrador, la aplicación nunca se descargará. AdminData.js porque no lo va a necesitar.

La división de código condicional utiliza el mismo concepto que representación condicional en React.

Conceptos avanzados de división de código

Una técnica avanzada que puede habilitar al dividir el código son las transiciones. El usarTransición() hook le permite realizar actualizaciones no urgentes que no cambiarán su interfaz de usuario hasta que terminen de actualizarse.

Primero, importas el gancho:

importar {usarTransición} de"reaccionar"

Entonces llamas al gancho, que vuelve pendiente y inicioTransición:

constante [estáPendiente, iniciarTransición] = usarTransición()

Finalmente, envuelva el código para actualizar su estado dentro iniciarTransición():

startTransition(() => {
 establecerEsAdmin((anterior) => !anterior)
})

Ahora su interfaz de usuario real no mostrará el valor de reserva (el texto de carga) hasta que el navegador finalice la transición. Esto significa que esperará a que el navegador descargue todos los datos de administración antes de intentar mostrar cualquier dato.

Otras formas de optimizar el rendimiento de React

Este artículo cubrió la división de código como un método para mejorar el rendimiento de sus aplicaciones React. Pero también hay varios otros métodos que pueden brindarle los conocimientos necesarios para crear aplicaciones sólidas.