React Frontend - Issue with being progressive web app. Adding 12 seconds latency

[surapuramakhil]

Describe the bug

It looks Entire JS code getting dumped in one JS file. That loading is synchronous / blocking next level of fetches.

It adds 12 seconds of additional latency. That's pretty bad for user experience.

This is for my site where I am not using any CDN.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots or video to help explain your problem.

Platform

• Device: [e.g. Desktop, Mobile]
• OS: [e.g. macOS]
• Browser and version: [e.g. Chrome, Safari]
• Version: [e.g. v1.2.0]

[surapuramakhil]

@fenbox Ah, it's actually a bug. React is a progressive web App. This feature comes out of the box for almost all major front-end frameworks like Vue, angular, svelte not just React. Unless configurations are messed or explicitly disabled, this won't be the case.

This could be transitive effect of this #784

[shuashuai]

First of all, this is due to the packaging method of create-react-app. CRA will package all used node_modules packages into main.js; and main.js will return to the seat entry file to load the page and display the functions within the page，main.js will be used as the entry file of the application to load the page and display the functions within the page. All core logic is completed in main.js。

Secondly, React is a JavaScript library for rendering user interfaces (UI) rather than a progressive web App, of course you can use CRA to build PWA applications.

Finally, the real core of the problem here is that main.js is indeed a bit large. If the user does not enable http caching, or the network conditions are not good, it will cause the file to take too long to load,in response to this situation,I will split main.js in one of the next releases, so please be patient.

By the way, is the default internet speed on your side slow 3G? Or are you just trying to test a bad network situation? Because I conducted a test on stackoverflow. When I used the slow3G network speed to test the resource speed of stackoverflow, I found that it also takes more than 8 seconds to load their resources, so the network is also a very important factor.

[surapuramakhil]

@shuashuai No, I am not on Slow 3G (that's related to throttling feature of Edge stimulate running on slow internet). My internet speeds are actually over 150 MBPS.

My internet speed results

[shuashuai]

@shuashuai No, I am not on Slow 3G (that's related to throttling feature of Edge stimulate running on slow internet). My internet speeds are actually over 150 MBPS.

My internet speed results

I saw it from your screenshot

[surapuramakhil]

I understood "why you said that". It's a stimulation (DevTools feature of Microsoft Edge)

and coming to this

I will split main.js

If you are splitting this manually, unless it's CRA out of the box, I would recommend exploring other build tools. Checkout other popular react projects on GitHub.
Apache Superset uses "webpack" https://github.com/apache/superset/blob/master/superset-frontend/package.json
freeCodeCamp uses "getsBy" https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/package.json

It will give you list of options, do evaluate them based on current and future needs of Apache answer.