Endless loop loading JS in Chrome

Thank you for the analysis and detailed answer!

It seems that the “next issue I want to tackle” is actually the root cause of the first issue :wink:.

I am actually not sure I can “group the files”. I use StencilJS which bundles the app using Rollup under the hood. It tries per default to bundle the smallest modules together resulting in multiple JS chunks (around 290 in my current case).

I’ll try to find an option to supercharge the grouping or see if the custom output bundles would also work in case of an app and not only for components.

As you noticed 974 requests on Chrome, I can also think there is an issue with preloading modules. To test the app on the simulated local network I had to find a workaround to force the preload of all modules (thread). This might not have a bad side effect in production with Chrome, which would to some extension make sense as I rather like not to force to preload everything.

Generally speaking, I also noticed that uploading many chunks to a canister is slow and costly. It seems to me, with my noob eyes, that the network except assets canisters to host only one or two (gigantic) JS files, which is kind of a bad practice to me. Small lazy loading modules’ chunk are more performant for modern browsers.

Summarized:

  • I’ll test a version without the preloading workaround
  • I’ll check if I can manage to group modules or even upload a single JS file

I’ll update the thread accordingly.