Why is a React + Three/Threejs application more sluggish when deployed/in production compared to when it's running on localhost

huangapple go评论68阅读模式
英文:

Why is a React + Three/Threejs application more sluggish when deployed/in production compared to when it's running on localhost

问题

抱歉,没有提供一个示例,但是:我有一个使用Three.js的React应用程序,在我的部署站点上,与在本地开发期间运行时相比,缩放功能要差得多。它部署在https://svo.utenforuio.no上,但请注意,这是一个可能会时不时出错的测试部署。

它不应该是相同的代码吗,只是被压缩了吗?我已经搜索了很多方法,但没有答案...

我正在开发一个使用后端数据在地球上显示太阳观测的Three.js + MobX + Three.js应用程序。

英文:

Sorry, don't have a fiddle, but: I have a React application with Three.js where the zoom functionality is much poorer on my deployed site compared to when it's running on localhost during development. It's deployed on https://svo.utenforuio.no, but note that this is a test deployment which might be buggy at times.

Isn't it supposed to be the same code, just minified? I've googled a million ways, but no answer...

I'm developing a threejs + mobx + threejs application showing Solar observations on a globe using data from a backend.

答案1

得分: 0

你是在使用Next.js还是Remix?如果你在服务器上渲染React,可能是因为你的计算机规格比你部署到的服务器好。

英文:

Are you using Nextjs or Remix? If you're rendering React on the server, it might just be that your computer has better specs than the server you're deploying to

答案2

得分: 0

找到了!package.json文件中的"browserslist"设置在开发和生产环境下是不同的,因此生产部署生成的代码比在开发(本地主机)环境中使用的代码效率低。

调整"browserslist"设置(并使它们相同)解决了我的问题:

  "browserslist": {
    "production": [
      ">0.5% and not dead, last 5 chrome versions, last 5 firefox versions, last 5 safari versions, last 5 edge versions"    
    ],
    "development": [
      ">0.5% and not dead, last 5 chrome versions, last 5 firefox versions, last 5 safari versions, last 5 edge versions"    
    ]
  }
英文:

Found it! The "browserslist" settings in package.json were different for development vs production, so the production deployment was crating more inefficient code than what was used in the development (localhost) situation.

Tuning the browserslist settings (and making them identical) solved my problem:

  "browserslist": {
    "production": [
      ">0.5% and not dead, last 5 chrome versions, last 5 firefox versions, last 5 safari versions, last 5 edge versions"    
    ],
    "development": [
      ">0.5% and not dead, last 5 chrome versions, last 5 firefox versions, last 5 safari versions, last 5 edge versions"    
    ]
  }

huangapple
  • 本文由 发表于 2023年3月9日 16:53:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/75682287.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定