Design Systems Team/Code splitting

This is a proposal for how to approach code splitting in Codex, and the impact that would have on the developer experience of using Codex in MediaWiki.

Current situation
Most features using Codex are encouraged to use the  ResourceLoader module. This module contains the entire Codex library, which is fairly large: 156 KB of JavaScript and CSS (transmitted over the network as 32.2 KB of compressed data); and this number will only grow as more components are added to Codex. Most features use only a subset of Codex components, so a substantial portion of this code is unused.

For the search feature in Vector, the Web team was very concerned about limiting the size of the code that is loaded, since the search feature appears on every page. To support this, the Design Systems Team created a special build of Codex, and made it available as the  module in ResourceLoader. This module only contains the TypeaheadSearch component and its dependencies. It's about half the size of the full library, at 66 KB of JavaScript and CSS (16.1 KB compressed).

[challenges for CSS-only components]

Proposal
[TODO]

Related efforts
Once the Vue 3 migration is completed and we can switch from the migration build of Vue to the regular build, this will reduce the size of Vue from ~57 KB compressed to ~50 KB compressed.

If we were able to use a build step to compile Vue templates to JavaScript (or at least do so in performance-sensitive places), we could load the runtime-only build of Vue. This would reduce the size of Vue further, from ~50 KB compressed to ~33.5 KB compressed.