La aplicación web de mi proyecto utiliza la carga ReactLazy para mejorar el rendimiento y funciona muy bien. El desafío es que necesitamos reutilizar los mismos cientos de archivos fuente para una aplicación de Cordova para iOS y Android, donde no queremos una carga diferida. En Cordova, se compila un solo paquete en la aplicación, por lo que todo el código está allí al instante sin demoras en la red. En Córdoba, la única penalización por tener más código de residente es la velocidad de la descarga única desde las tiendas App/Play.
Actualmente usamos webpack para resolver este problema en tiempo de compilación: un script de nodo llamado por webpack hace una copia completa de nuestro código base en un directorio diferente y luego usa una expresión regular para sustituir todas las instancias de ReactLazy con importaciones directas. Esto funciona, pero tarda 90 segundos en compilar un solo cambio y tiene otros efectos molestos sobre la productividad en el IDE de WebStorm.
ejemplo: Usamos una expresión regular para transformar nuestro código que se ve así:
import PropTypes from 'prop-types'; import React, { Component, Suspense } from 'react'; const FilterBaseSearch = React.lazy(() => import(/* webpackChunkName: 'FilterBaseSearch' */ '../../components/Filter/FilterBaseSearch')); class Ballot extends Component { ...a esto (por Córdoba):
import PropTypes from 'prop-types'; import React, { Component, Suspense } from 'react'; import FilterBaseSearch from '../../components/Filter/FilterBaseSearch'; class Ballot extends Component { ...Esto nos permite tener una base de código, que se puede compilar para una aplicación web Lazy Loading y también como una aplicación Cordova de paquete único.
¿Hay alguna manera de incluir condicionalmente los archivos de clase y evitar tener que hacer una copia reescrita para la compilación de Cordova?