Weird performance on the deployed scene in reactjs

Questions
1

Hello,
i am building a scene in threejs on the localhost the scene fps is like 20 30,when i deploy it on netlify or aws the fps on the deployed project (online) is dropping to 5 10 any advice ?

2
  1. Are there any errors appearing in the devtools console on the deployed version?
  2. When you build locally (not npm run dev - npm run build && open ./build/index.html or equivalent), does it also lower the FPS? A likely issue is that the build target is targeting too old versions of browsers.
3

No errors, and the npm run build is also laggy

4

If npm build is laggy that most definitely means your production-facing build is targeting too old browsers.

Which build tool are you using? Switching to Vite may save you quite a bit of headache.

5

Using the default npm build of react scripts

6

I’m assuming you’re also using just create-react-app overall - in which case do change to vite. CRA is outdated and unmaintained, it targets old browsers (ie. decreasing the performance and blocking you from using more modern JS APIs), and makes any custom configurations quite very hard.

Vite is simpler, more configurable, and well maintained (you won’t have to change much, just npm create vite and move your src directory contents, that’s all - scripts remain the same.)

1 Like