ReactJS – separación de la interfaz de usuario y la lógica con la carga perezosa.
Quiero separar mi interfaz de usuario y lógica para disminuir el tamaño del paquete. Sé que puedo separar la lógica con el enfoque de componentes sin interfaz gráfica o hooks personalizados, etc. pero también quiero separar la lógica del paquete. Supongo que puedo lograr esto cargando perezosamente toda la lógica y enviando la interfaz de usuario de inmediato.
He creado un ejemplo de codesandbox para demostrar lo que quiero. Hay un componente llamado ui/index.js. Incluye un componente llamado <Logic {...props} />. El componente Logic se renderiza cuando el estado enableLogic se establece en verdadero al renderizar inicialmente el componente de la interfaz de usuario. El componente Logic se carga de forma perezosa y no devuelve nada, null. El único propósito del componente es renderizar la lógica.
const Logic = React.lazy(() =>
import(/* webpackChunkName: "logic" */ "./logic")
);
Mi pregunta es, tener este tipo de enfoque para componentes simples y ficticios sería una tontería, pero a veces, alguna parte de la lógica de la aplicación grande puede ser pesada. ¿Me pregunto si separar la lógica y la interfaz de usuario con este tipo de enfoque puede causarme algún problema? ¿Este enfoque es utilizado por muchas personas? ¿Hay algún tipo de biblioteca que utilice el mismo enfoque para separar la lógica y la interfaz de usuario con la carga perezosa?
Creo que disminuir el tamaño del paquete para páginas con lógica pesada puede reducir el tiempo que los usuarios verán las páginas.
Puedes ver la implementación a través del enlace de codesandbox aquí.
Codesandbox
davy.ai
Separar la interfaz de usuario y la lógica con Carga Incremental
Como experto en TI especializado en javascript, reactjs, webpack, carga incremental y dividir el código, puedo proporcionar ideas sobre cómo disminuir el tamaño del paquete al separar la interfaz de usuario y la lógica utilizando la carga incremental.
El enfoque de “componentes sin interfaz” o “hooks personalizados” es eficaz para separar la lógica de la interfaz de usuario. Sin embargo, para aplicaciones complejas con lógica intensiva, tiene sentido utilizar el enfoque de carga incremental. Esto implica cargar de forma incremental toda la lógica y enviar la interfaz de usuario de inmediato.
Para implementar este enfoque, se puede crear un componente llamado
ui/index.js. Este componente incluye un componente llamado<Logic {...props} />, que solo se renderiza cuando el estadoenableLogicestá establecido entrue. El componenteLogicse carga de forma incremental y no devuelve nada más quenull, sirviendo únicamente para renderizar la lógica.Utilizar este enfoque para componentes simples e inertes sería innecesario, pero para aplicaciones grandes, puede reducir el tiempo de carga de páginas con lógica intensiva.
Algunos posibles desafíos con este enfoque incluyen una mayor complejidad en la gestión del código y garantizar que todos los componentes y la lógica se carguen cuando sea necesario. Sin embargo, es una práctica común utilizada por muchos desarrolladores, y existen muchas bibliotecas que utilizan el mismo enfoque para separar la lógica y la interfaz de usuario con carga incremental.
En general, separar la interfaz de usuario y la lógica con carga incremental puede mejorar el rendimiento y la experiencia del usuario para aplicaciones complejas con lógica intensiva. La implementación de este enfoque se puede ver en el ejemplo de codesandbox proporcionado.