Initial loading becomes very slow after upgrading to 1.10.1

[theycallmek]

The initial loading becomes very slow after upgrading from 1.8+ to 1.10.1 , any idea why? Or any suggestions how do I inspect and address the issue? Thanks!

[paulishca]

Could you please show a similar screen (with Disable cache) or a live url.

[theycallmek]

Hi @paulishca, thanks for helping out, here are the screenshots

For deployed app -

The content download time for meteor_js_resource takes over 9s and its resource size is 4MB, is this normal, how should we optimize it?

For localhost -

On localhost, it takes over 33s to load the initial page…

For the record, we did not see this slow in meteor version 1.8+ (no matter local or deployed version), is there some configurations we are missing on 1.10.1? Thanks!

[paulishca]

Ok, on the deployment all looks fine except 10 sec to get the JS bundle which is rather small at 600K.

1. Ok, are you running your development on Windows? (a number of people had this kind of issues on windows).
2. Could you please start local in production with --settings settings.json --production --exclude-archs web.browser.legacy and see what the download time for the bundle is. Just trying to determine if your download time is due to something in the code or due to the host.
3. Could you remove everything from your public file (or as much as possible) and not use fonts (just use any native/default font). - People had issue with compiling various versions of fonts and icons from Google’s Material library.
4. Do you use SSR? If yes, would it be possible to bypass it and see what the local production behavior is.
5. Do you use an APM? If not, you could try the https://montiapm.com/. They have a free tier that might help to identify CPU, Memory or other things.
6. What is your Meteor hots?

[theycallmek]

Hi @paulishca, thanks for your detail steps -

1. No, my local runs on mac, and the deployment is on cloud foundry
2. See screenshot below - the bundle download time seems drop, but the load time is still high ~33s+
   
   
3. Removed favicon and link to google fonts, see screenshot below, see no significant improvement…
   
   
4. No
5. No, but I guess the issue is in the code not the deployment?
6. What is that?

[paulishca]

6. I meant what is your host and I understand you use Cloud Foundry.

Let’s put the total time of load aside for the moment and on local in production, could you tell me what is the approximate time in seconds for your first view like a change in background color, or a header/menu loaded, anything that you can see on the screen. That should be pretty close to your bundle download time + bundle processing time. Is it 2-3 seconds?

I use Mac and the latest version of everything and for me everything is … lightning just to use an apple term :).

I see your cloud is in China or a Chinese brand. Do you operate in China?

[theycallmek]

So, like I said before, this definitely has something to do with the version, see screenshot below, the local production run only takes ~3s+ to load when in version 1.8.1…

[paulishca]

I suggest you first try to determine why your bundle JS takes a long time compared to the time taken on local and only then determine what is in the rest of the download up to 5MB and why that takes a long time.

Most of your other things are only being downloaded once the bundle JS in interpreted. For instance, you may be downloading 2 MB of split code libraries from NPM which are not present in the bundle. What is beside the bundle doesn’t really matter for your research. Once you determine why the bundle takes a long time to download, that probably answers to why the rest of the assets take a long time.

[theycallmek]

Hi @paulishca, thanks for the explanation - I understand your point, but then my question would be, why bundle download time in meteor version 1.8.1 is short vs which in meteor version 1.10.1 is long? Any suggestions where I could start investigation on? Would you suggest downgrading to 1.8.1? Thanks!

[paulishca]

Downgrading is not a long term solution. Let me please go back to a previous question. On local, in production how long it takes to see something on your screen? let’s call this the initial load time.

[theycallmek]

Like I mentioned, it’s approximately ~33 seconds… vs, in 1.8.1, it’s ~3 seconds, even less sometimes…

[koenlav]

Probably related to: https://github.com/meteor/meteor/issues/10990

[lalomores]

Thanks a lot @koenlav !
Following that issue I finally got to this one [0] that stated the exact problem AND solution. At least for me

Summarizing:
Using destructuring imports from material-ui/icons was the root cause for everything.

So, digging the code I found:

import { AddCircle, ChevronRight, RemoveCircle } from ‘@material-ui/icons’;

And turned it into:

import AddCircle from '@material-ui/icons/AddCircle';
import ChevronRight from '@material-ui/icons/ChevronRight';
import RemoveCircle from '@material-ui/icons/RemoveCircle';

and that fixed the problem (which in my case was the initial load time went off 130s plus!!).

As an additional note: It seems this problem has come and go for several Meteor versions now. I had it when upgrading from version 1.8.1 to 1.8.3 (although as I read, it appeared back in 1.8.2). And now when moving to version 1.10.1.

@theycallmek This seems consistent with your experience. Hope it is your exact problem as well. Otherwise I’d take a look at destructuring imports for other libs. But definitely something to be fixed (again) soon I hope.

[0]

"import { TagFaces } from '@material-ui/icons';" syntax makes the app load for ages

[theycallmek]

Hi @lalomores, @koenlav, wow! This indeed fixed my issue!! Thanks a lot!

I was quite desperate already, although I’ve received a lot complaints from my users. Guess they had no other options but to bear with the slow initial loading.

Hope Meteor would fix this soon - NOT able to use destructuring imports would really bring some serious effort to large apps…