División de código en React

¿Qué es la división de código y cómo introducirla en una aplicación React?

Las aplicaciones JavaScript modernas pueden ser bastante grandes en términos de tamaño de paquete. No quieres que tus usuarios tengan que descargar un paquete de 1 MB de JavaScript (tu código y las bibliotecas que usas) solo para cargar la primera página, ¿verdad? Pero esto es lo que sucede de manera predeterminada cuando envías una aplicación web moderna creada con el paquete Webpack.

Ese paquete contendrá código que quizás nunca se ejecute porque el usuario solo se detiene en la página de inicio de sesión y nunca ve el resto de la aplicación.

La división de código es la práctica de cargar únicamente el JavaScript que necesitas en el momento en que lo necesitas.

Esto mejora:

• el rendimiento de tu aplicación
• El impacto en la memoria y, por lo tanto, en el uso de la batería en los dispositivos móviles
• el tamaño de KiloBytes (o MegaBytes) descargado

React 16.6.0, lanzado en octubre de 2018, introdujo una forma de realizar la división de código que debería reemplazar cada herramienta o biblioteca utilizada anteriormente: React.lazy y Suspense .

React.lazyy Suspenseforman la manera perfecta de cargar de forma diferida una dependencia y cargarla solo cuando sea necesario.

Empecemos con React.lazy. Se utiliza para importar cualquier componente:

import React from 'react'const TodoList = React.lazy(() = import('./TodoList'))export default () = { return ( div TodoList / /div )}

El componente TodoList se agregará dinámicamente a la salida tan pronto como esté disponible. Webpack creará un paquete separado para él y se encargará de cargarlo cuando sea necesario.Te recomendamos Todo sobre sofas

Suspensees un componente que puedes usar para encapsular cualquier componente cargado de forma diferida:

import React from 'react'const TodoList = React.lazy(() = import('./TodoList'))export default () = { return ( div React.Suspense TodoList / /React.Suspense /div )}

Se encarga de manejar la salida mientras se obtiene y procesa el componente cargado de forma diferida.

Utilice su fallbackpropiedad para generar algún código JSX o la salida de un componente:

... React.Suspense fallback={pPlease wait/p} TodoList / /React.Suspense...

Todo esto funciona bien con React Router:

import React from 'react'import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'const TodoList = React.lazy(() = import('./routes/TodoList'))const NewTodo = React.lazy(() = import('./routes/NewTodo'))const App = () = ( Router React.Suspense fallback={pPlease wait/p} Switch Route exact path="/" component={TodoList} / Route path="/new" component={NewTodo} / /Switch /React.Suspense /Router)

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

División de código en React

Las aplicaciones JavaScript modernas pueden ser bastante grandes en términos de tamaño de paquete. No quieres que tus usuarios tengan que descargar un paquet

programar

es

2025-01-17

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente