Dynamic Import for web.cordova not working

mobile Cordova
1

Hello Meteorians,

I’m currently trying to reduce the Cordova App Size by using dynamic imports. I have the plotly library, size 3.5 mb. It is reduced in the webApp, but in web.cordova, size is still the same. I added a screenshot using

meteor --extra-packages bundle-visualizer --production

Here’s the source code. I also tried “@loadable/component”, which works for webApp, but not for web.cordova.

import React, { Suspense } from 'react'

const Plot = React.lazy(() => import('../../../../../node_modules/react-plotly.js/react-plotly'))


export default function LazyPlot(props) {
    return (
        <Suspense fallback={<div></div>}>
            <Plot {...props} />
        </Suspense>
    )
}

web-cordova
web-cordova1690×1300 203 KB

Thank you for helping me :smile:

2

In a cordova app, the entire client app is bundled with the app as installed/downloaded in the device. There is no point in lazy loading in this case.

1 Like
3

Hi,

I’d say the initial javascript parsing time and the used memory of the application code would be different if some modules could be loaded lazily (or possibly never), or is this not correct?

1 Like
4

Hi, i’m interested in this too…

5

Is there any news about it?

6

Yes. One of the replies already contains the answer.

7

You mean this:

In a cordova app, the entire client app is bundled with the app as installed/downloaded in the device. There is no point in lazy loading in this case.

This is simply the truth about how things work now, not the answer.
cordova-plugin-meteor-webapp a full-fledged web server and it can server dynamic imports JS chunks.

But now it serve one BIG main js file, in my project it about 20mb and app cold start about 10-15 sec on not flagman devices.

So the actual question is: anybody know about adding dynamic imports to web.cordova target?

1 Like