es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo dividir el código en múltiples rutas de React en un solo archivo?

31 Jul, 2023 Programación

Actualmente tengo las siguientes importaciones de componentes perezosos:

const LazyDashboard = React.lazy(() => import('./pages/app/Dashboard'));
const LazyProfile = React.lazy(() => import('./pages/app/Profile'));

Luego, en las rutas:

{userToken && <>
  <route exact="" path="/app" element=""></route><lazydashboard></lazydashboard>}/> 
  <route exact="" path="/app" element=""></route><lazyprofile></lazyprofile>}/>
}
  • Al ir al dashboard, se carga un fragmento. ¡Bien!
  • Al ir al perfil, se carga otro fragmento. ¡No está bien! ¿Cómo puedo marcar estas dos importaciones para que se agrupen en el mismo fragmento?

¿Hay alguna manera de hacer esto con React.lazy?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una forma de agrupar varios componentes perezosos en el mismo fragmento utilizando React.lazy. Puedes crear un archivo separado para las importaciones de los componentes perezosos y usar los comentarios mágicos de webpack para especificar el nombre del fragmento.

    Por ejemplo, en un archivo llamado lazyImports.js:

    // lazyImports.js
const LazyDashboard = React.lazy(() => import(/* webpackChunkName: "dashboard" */ './pages/app/Dashboard'));
const LazyProfile = React.lazy(() => import(/* webpackChunkName: "dashboard" */ './pages/app/Profile'));

export { LazyDashboard, LazyProfile };

    Luego, en las rutas:

    import { LazyDashboard, LazyProfile } from './lazyImports';

{userToken &&
   <>
     <route exact="" path="/app" element=""></route><lazydashboard></lazydashboard>}/> 
     <route exact="" path="/profile" element=""></route><lazyprofile></lazyprofile>}/>

}

    Al especificar el mismo webpackChunkName para ambas importaciones perezosas, se agruparán juntas en el mismo fragmento. Esto reducirá el número de solicitudes de red y mejorará el rendimiento.

Comments are closed.