The FPS is dropping by twice the number in project build

[suvel-the-dev]

Need help to diagnose this.

[gsimone]

We are gonna need more info to help you, can you share anything at all?

[suvel-the-dev]

When I host the app locally, I am able to get a max FPS of 60. But when I take build(react-scripts build) of the same the max FPS is 40, making the app laggy.

FYI I used Stats.js to find the max FPS.

[joshuaellis]

What @gsimone is saying, is there a code sandbox or repo we can look at to diagnose the issue? Currently it's a black box since we don't know what the code is doing.

[suvel-the-dev]

Oh ok @joshuaellis.
Link to the project repo 👇
https://github.com/suvel-the-dev/warehouse_management/tree/v5

[drcmda]

Performance regression in production can be related to bad babel transforms that are not optimized, when it turns fast code that runs in loops into es11 compat code. I would try upping the browserslist field in package json. Other than that: devtools. If it's fast in dev but slow in prod it's gotta be something ...

[suvel-the-dev]

Hey @drcmda, thanks for your response. I tried investigating with your input but failed to get an answer yet. Could please specify the attribute which I need to be updating under the browserslist or maybe a link to a related document.

By the way, I am using create-react-app to maintain my project and I know it optimizes the build in some way. Would that be a reason for this behavior?

[drcmda]

babel takes your code and transpiles it so that old browsers can run it. you can influence how far that goes by tweaking browserslist, especially the percentages. i would definitively exclude ie11 because that will transpile practically everything. there's no easy answer here, just a lot of profiling in dev tools until you have the culprit.

[bhushan6]

Try without adding stats js. Because I ran into same issue when I was using spector js or r3f-perf. My app would run perfectly till I used to add r3f-perf component in my canvas or inspect with spector js extention. So maybe you can try that first.

[suvel-the-dev]

Thanks for responding @bhushan6 . I noticed the lag in the build, that is when I used stat.js to determine what is goes wrong. I'm positive that it is not caused by stats.js, maybe not for me.