While emotion is great for the developer experience, it does have an affect on how the speed of an application. This article serves as a great reference: https://calendar.perfplanet.com/2019/the-unseen-performance-costs-of-css-in-js-in-react-apps/
At my company, we want to assess how significant this performance impact is, and if it's worth optimizing for.
How might I analyze this? I could spin up a new application and compare two basic examples as shown here: https://pustelto.com/blog/css-vs-css-in-js-perf/ but that is really just theoretical, I want to see how it affects our application. I could use the profiler tab in developer tools, but all that seems to really tell me is how much total time was spent scripting, which is much more than just css-in-js parsing.
So my question is, does anyone know of a way to get visibility onto css-in-js's performance cost in a real world application? Perhaps there is a good way to do it with the performance tab that I don't know about?
Any help is greatly appreciated!
