Developer demo view & performance testing.

[zeroedin]

I'd like to do more performance testing on my components as I build. The developer demo view seems to really inhibit the testing of the component on its own. Large time to first contentful paint/ time to interactive. I'd like to start a conversation about ideas for where/how we can improve this to isolate the component to test it directly.

[bennypowers]

How about running lighthouse on a kitchen sink page on the netlify deploy?

[zeroedin]

I guess I was thinking of a "micro" view rather than the "macro" view that the kitchen sink would be. Isolating the component so it's the only thing on the page. Also something pre-commit then after /shrug

[bennypowers]

yeah we could do it per page demo, too

That's how we run the PR perf reports on PFE. Should we bring that over to RHDS, and iterate to tweak the settings from there?

[bennypowers]

#407

[brianferry]

Started looking around for examples of libraries that use this and stumbled upon https://github.com/blueprintui/web-test-runner-performance

Tested it a bit with pfe-tooltip w/ the before and after on moving to @floating-ui and saw these results:

With popperjs

Bundle Size (kb)	Single Element Rendering (ms) - avg of 50	100 Elements Rendering (ms) - avg of 50
22.233	16.112	15.30

With @floating-ui

Bundle Size (kb)	Single Element Rendering (ms) - avg of 50	100 Elements Rendering (ms) - avg of 50
15.52	15.83	15.20

The numbers aren't always consistent but the averaging helps to keep them in line at least, though I'm not sure what exactly our threshold would be outside of figuring it out component-by-component.

[brianferry]

Oh and here's the testing code specifically

describe('performance', () => {
  it('should bundle and treeshake under 16 kb', async () => {
    console.log(`bundle size (in kb): ${(await testBundleSize('@patternfly/pfe-tooltip', { optimize: false })).kb
      }`)
    expect((await testBundleSize('@patternfly/pfe-tooltip', { optimize: false })).kb).to.below(16);
  });

  it(`should render under 10ms`, async () => {
    const result = await testRenderTime(basicElement, { iterations: 1, average: 50});
    console.log(`duration of one element rendering: ${result.duration}`);
    expect(result.duration).to.below(20);
  });

  it(`should render 100 elements in under under 70ms`, async () => {
    const result = await testRenderTime(basicElement, { iterations: 100, average: 50 });
    console.log(`duration of 100 elements rendering: ${result.duration}`);
    expect(result.duration).to.below(70);
  });

});