Proposal: CI Tooling Tooling for Component Performance Benchmarking

[codebender828]

Is your feature request related to a problem? Please describe. Since we are a CSS-in-JS component library for Vue.js (which is typically not common), it's only prudent of us to make sure our components remain performant to an acceptable degree. In order for us to achieve this result, it should be measurable.

This issue proposes a way to keep track of the performance of our component releases. This will allow us to keep a close eye on performance for all Chakra UI Vue components. It will thus allow us to enforce best practices for developing performant UI components.

It's also a good way to measure and report performance for our releases.

Describe the solution you'd like Add CI performance profiling for Chakra UI Vue components.

Describe alternatives you've considered Haven't found any tooling yet that allows us to do this! Will be happy to have some suggestions around this!

Known resources

• MDN Docs - User Timing API • API Documentation
• Profiling React Components with the User Timing API • Blog Post

Proposed solution

• Build a component that allows us to leverage the User Timing API for it's children?
• Since the results may be subject the host machine's resources, the best place to run them would be in Github Actions CI environment. We can specify the amount of resources the Operating System will have so as to ensure some level of consistency in results as well as offer a controlled environment.

Additional context Related to #241

[devivekw]

Hey @codebender828 are you still looking for help on the Issue? I would be happy to help out!