My project's WebApp uses ReactLazy loading to improve performance, and it works great. The challenge is that we need to reuse the same hundreds of source files for a Cordova app for iOS and Android, where we don't want lazy loading. In Cordova a single bundle is compiled into the app, so all the code is instantly there with no network delays. In cordova the only penalty for having more resident code is the speed of the one time download from the App/Play stores.

Currently we use webpack to solve this problem at compile time -- a node script called by webpack makes an entire copy of our code base in a different directory and then uses a regex to substitute all of the ReactLazy instances with direct imports. This works, but takes 90 seconds to compile a single change, and has other bothersome effects on productivity in the WebStorm IDE.

example: We use a regex to transform our code that looks like this:

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 {
    ...

to this (for Cordova):

import PropTypes from 'prop-types';
import React, { Component, Suspense } from 'react';

import FilterBaseSearch from '../../components/Filter/FilterBaseSearch';

class Ballot extends Component {
    ...

This allows us to have one code base, that can be compiled for a Lazy Loading WebApp and also as a single bundle Cordova app.

Is there a way to conditionally include the class files and avoid having to make a rewritten copy for compilation for Cordova?