The new Vue.js search will have at least the following dependencies:
- Presentation styles
- Client-only JavaScript
- Vue.js itself (via Core's ResourceLoader module T252348)
It's expected that Vue.js will be the lion's share at [[ https://bundlephobia.com/result?p=vue@2.6.11 | 64 kilobytes minified ]] for the runtime only which is a significant increase in page size. The runtime + compiler is 91 kilobytes minified. According to [[ https://grafana.wikimedia.org/d/000000205/mobile-2g?panelId=76&fullscreen&orgId=1&from=now-30d&to=now | present desktop dashboards ]], the current JavaScript payload is 216 kilobytes.
How should we load all this code? E.g., as a ResourceLoader module dependency in `skin.json` or [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Popups/+/deaaf0961b7ae8d28ef94023e04db1fb93a7724d/resources/ext.popups/index.js#1 | defer loading until after initial render ]]? On input? Something else? That's what this task identifies.
== Conclusions
- The search widget is lazy-loaded upon first interaction currently. At that point, it's mainly a matter of how much (if any) technical debt to incurr and/or how many module bundles to create. This approximates the loading strategy for the old search.
== Acceptance criteria
- [] A loading strategy is proposed and any tasks needed are created.
- [] The #performance-team is consulted or notified as needed.
- [] T250336, T251544, and T244276 are updated as needed.