Porting over the existing MachineVision front-end from OOUI to Vue.js (without changing much in terms of design or functionality) gives us an interesting opportunity to do some real-world performance comparisons of the two approaches. And since this is a nice but not mission-critical feature, I feel like we have a little bit of room for experimentation that could inform more high-stakes projects down the road.
Payload Size
This is the simplest thing to measure but also probably the least informative. Modules were fetched locally in isolation using these request params:
/load.php?modules=ext.MachineVision&skin=vector&lang=en&debug=false
| Module | MV Classic | MV Vue.js |
|---|---|---|
| ext.MachineVision | 58.86KB | 66.05KB |
| vue | 0KB | 91.90KB |
| vuex | 0KB | 10.15KB |
So the Vue.js version is about 109.24KB heavier than the "classic" version. Of course, the Vue.js version still has to load all the original OOUI/OOJS dependencies, since we are still relying on OOUI widget modal dialogs (this is because we don't have a global, Vue.js-compatible equivalent of WindowManager / ProcessDialog yet, and creating one here was out of scope).
The oojs-ui-windows module weighs 51.91KB, and oojs-ui-widgets itself is 106.01KB – if we were able to move away from OOUI-based process dialogs here then the comparison would start to look much more favorable.
Lighthouse metrics
According to Google Chrome's Lighthouse feature, here's the current breakdown for the desktop version of Special:SuggestedTags on production Commons:
| Metric | MV Classic | MV Vue.js |
|---|---|---|
| First Contentful Paint | 1.1s | |
| First Meaningful Paint | 1.1s | |
| Speed Index | 3.6s | |
| First CPU idle | 4.2s | |
| Time to Interactive | 4.7s | |
| Max Potential First Input Delay | 510ms | |
Other key metrics?
TBD
@Krinkle and @Catrope I'd love to hear any recommendations you might have on other key metrics that would be good to try to capture before and after we deploy the Vue.js port (which we're aiming to don in the next 1-2 weeks).
