Poor performance in production build

[SBenni]

Hi, my react-konva renders nearly by 60fps in debug mode (react scripts start). But in production mode (react-scripts build) renders the same app only by 20fps?

https://codesandbox.io/s/lucid-ganguly-4lgqrx

This is the app, scrolling by horizontal scrollbar ist very fast, but on production build very slow?

Thank you

[lavrton]

I don't see a difference on my machine.

[lavrton]

BTW. Instead of using visible=false on a Konva node, it will be better to remove if from the scene. Like this:

  function createTimebarTextItem(xId, xVisible, x, y, xWidth, xTask) {
    if (!xVisible) {
      return null;
    }
    return (
      <TimebarTextItem
        key={xId}
        index={xId}
        x={x}
        y={y + 25}
        title={xTask.title}
        visible={xVisible}
        timebarTextRefs={timebarTextRefs}
        width={xWidth}
      ></TimebarTextItem>
    );
  }

When you change a transform attribute of any container (like y of Layer), Konva is doing plenty of recalculations. Even for invisible nodes. So removing that should be simpler for Konva to handle.

[SBenni]

http://myplanner365.s3-website.eu-central-1.amazonaws.com/

This is the same project build by react-scripts build

[lavrton]

I don't know. That url works good to me. I have the same 13fps, when I set 4x CPU slowdown.

[SBenni]

okay, seems to be a problem by my pc, on another machine the problem doesn't exists, sorry!

[SBenni]

Find out the problem in package.json for production build Very fast: ">1%",

Very slow: ">0.2%",