Performance severely degraded when compiling with create-react-app

maurocolella commented 3 years ago

Hi.

Although the issue isn't pressing as I've found a workaround, I thought it important to mention it.

This is under NDA, so I will try to carefully disclose no more than is necessary to clarify the issue, or possibly help repro.

Basically, with create-react-app, on an app which contains several static meshes, a couple of simple shaders, and one skinned mesh, compilation slashes the framerate on several desktop environments. From 120+ fps in dev, on my own machine (Nvidia 3080), down to 40.

Relevant dependencies:

    "@babel/core": "7.12.3",
    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
    "@react-three/drei": "^4.3.2",
    "@react-three/fiber": "^6.0.16",
    "react": "^17.0.2",
    "react-app-polyfill": "^2.0.0",
    "react-dev-utils": "^11.0.3",
    "react-dom": "^17.0.2",
    "react-is": "^17.0.2",
    "webpack": "4.44.2",
    "webpack-dev-server": "3.11.1",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "5.1.4"

This is using vanilla JavaScript.

I was able to work around the issue by ejecting, and coercing CRA scripts to produce output in development mode / development quality.

I tried to disable minification and source map emission individually, independently, unfortunately to no avail.

But emitting output in development mode definitely fixes the issue. I get 120fps again just as when running with the dev server.

drcmda commented 3 years ago

there are two factors here,

first, react in dev mode is very slow because of dev profiling. but this usually does not affect threejs react apps too much because they shouldn't use setState for fast state: https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls this perhaps is something to look into. if you have setstate in a loop, in useframe, in fast events, that has to be cleaned up.

second, the babel transpile stage. if your browsertargets are too loose it will start to transpile classes, async, and even de-opt critical loop code, including threejs internals. im pretty happy with this config so far:

module.exports = {
  plugins: [],
  presets: [
    [
      '@babel/preset-env',
      {
        include: [
          '@babel/plugin-proposal-optional-chaining',
          '@babel/plugin-proposal-nullish-coalescing-operator',
          '@babel/plugin-proposal-numeric-separator',
          '@babel/plugin-proposal-logical-assignment-operators',
        ],
        bugfixes: true,
        loose: true,
        modules: false,
        targets: '> 1%, not dead, not ie 11, not op_mini all',
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
}

joshuaellis commented 3 years ago

closing due to inactivity and an answer has been put forward.

TomasGonzalez commented 2 years ago

I'm facing this as well, Tried @drcmda config with no results.

pmndrs / react-three-fiber

Performance severely degraded when compiling with create-react-app #1635