Improve loading of components with lots of data

#174 / #177 fixes the load time of the devtools. This means we’ve closed #10 but we still get performance issues, localised to loading of component data.

This is an umbrella issue for 2 things we’re seeing after the above, for components with large $data eg. https://alpinetoolbox.com, the main “div” component:

1. loading the component data can take a while (“get-data”, “set-data”)
2. toggling attributes is sluggish

We still need to pinpoint where exactly the bottlenecks are, candidates:

• preparing of the data for serialization (we traverse the data and generate a data structure for the panel)
• JSON.stringify (the actual serialization might be costly for whatever reason)
• sending a large string from the backend to the proxy to the app to state to the devtools (panel)
• rendering the data in the panel with Alpine

Current ideas to fix bottlenecks (depending on where they are):

• the stringification/serialization and parse/deserialization operations might be costly -> switch to a faster implementation, probably a library
• making serialization an async process so it yields the event loop for execution of other operations (would keep the page/devtools more interactive)
• reduce the size of the message by
  • changing the schema (eg. removing unused fields)
  • encoding it (Lempel Ziv? encoding performance would have to be weighed against the cost of a larger payload)
• Alpine.js rendering optimisations, eg. x-show vs x-if, adding key to x-for’s

Notes

Ryan found this for profiling extensions https://gist.github.com/bvaughn/ab6a6aefcda21dd2db69c7eaa7bf3332

It’s probably worth adding a “load test”/“benchmark” Cypress example based on alpinetoolbox.com data.

[KevinBatdorf]

Left two potential optimizations here that i don’t think affect anything negatively but greatly improve responsiveness in my testing.

https://github.com/alpine-collective/alpinejs-devtools/pull/177#discussion_r593522339

[KevinBatdorf]

Yeah I agree we’re pretty good for now.