Production build runs much slower than dev

I started noticing that the 3d viewer on our site was running very slow. I tried to replicate it on my machine and saw that the same model running on the same viewer was running perfectly smooth. I then built the webapp in production mode and ran it and it was terrible. I tried removing the webpack Terser options that was in our configuration, but it didn’t change anything. I logged the duration for the render function of the viewer, and it runs in ~10ms in dev mode, and in ~50ms in production. The call trees from a Chrome dev tools performance analysis seem extremely similar and don’t reveal any huge difference, so I can’t pinpoint anything and it seems the code is running the same in dev and production.

Has anyone ever experienced similar bad performance in production, and how would you fix it ?

2 Likes

Did you have the browser dev tools open? This will decrease performance drastically.
Id try looking in performance tools like stats.js or using the chrome dev tools performance analyser.
Also printing out renderer’s information might help

I already looked a the performance analyser, I talk about it in my initial post

im facing same problem, have you found the solution for this?

Yes, we had a wepack down the line building the final client, which uses browserslist and was set to 0.2% (to support all but 0.2% of browsers according to market share reports). That includes IE11, Safari 8 and Android Browser 4.4. We had to exclude those explicitly in the browserslist configuration.

2 Likes

For future visitors, a minimal config that solved it for me (based on the accepted solution) was:

  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "not IE <= 11",
    "not Safari <= 8",
    "not Android <= 4.4"
  ]
2 Likes

does anyone know which transform causes it?

Haven’t figured out the responsible transformation; but suffering from the same issue.