Tengo una aplicación React creada con CRA. La aplicación está diseñada para dos entornos: sitio web y extensión de navegador que reemplaza una marcación rápida. Si bien es bueno usar importaciones dinámicas para el sitio web, sería bueno agrupar algunas páginas en la parte principal, de modo que no haya una pantalla de inicio al abrir una nueva pestaña.
¿Tiene alguna idea de cómo usar condicionalmente las importaciones dinámicas en función de la variable de entorno? He intentado el siguiente enfoque:
import WebsktopEager from 'pages/app/Websktop'; const WebsktopLazy = lazy(() => import('pages/app/Websktop')); const Websktop = process.env.REACT_APP_TARGET === 'extension' ? WebsktopEager : WebsktopLazy; Esperaba que la sacudida del árbol de webpack eliminara el código muerto según la condición, pero WebsktopEager todavía está incluido en un fragmento principal, aunque process.env.REACT_APP_TARGET !== 'extension' .
Según su código, la agrupación selectiva no ocurrirá solo porque process.env.REACT_APP_TARGET === 'extension' está presente como esperaba; ¡porque solo funcionará en tiempo de ejecución!
Por lo tanto, CRA será optimista al agrupar el código y también agrupará las importaciones ansiosas.
Lo que puede hacer es tener dos archivos de entrada separados, por ejemplo: por ejemplo:
main.eager.js // containing your eager imports main.lazy.js // containing your dynamic/lazy importsAhora tenga una configuración de paquete web personalizada para compilar por separado los proyectos en función de cualquier condición, variables de entorno que le gustaría usar. Y el punto de entrada para esos paquetes se puede diferenciar en función de los archivos mencionados anteriormente
Pero, por supuesto, la configuración personalizada del paquete web requerirá que ejecute el comando npm run eject . Así que echa un vistazo a los artículos sobre eso en línea.