Page MenuHomePhabricator

Reduce number of different MobileFrontend bundles
Closed, ResolvedPublic

Description

MobileFrontend currently provides 64 modules (58 in extension.json, 6 in MobileFrontendHooks.php), of which 51 are registered on desktop and 64 on mobile.

This amount to a significant overhead to the startup module, which Performance Team is working on this quarter to reduce in size as part of T192623.

This task is to track the effort of removing and/or consolidating modules that are not separately needed.

To do this, I find it helps to think of modules as delivery bundles. The primary purpose of a module registration is to be able to queue it with OutputPage::addModules (or to lazy-load it client-side). And modules are only split to avoid unused code being loaded, e.g. when there are N>1 other modules dependent on it, where those N modules are not always loaded together.

See also:

Event Timeline

Krinkle created this task.May 7 2018, 11:29 PM

Change 431678 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/extensions/MobileFrontend@master] mobile.issues: Consolidate mobile.issues.images module

https://gerrit.wikimedia.org/r/431678

The team is preparing for a technical project which will do exactly this. We're planning to start in June after offsite. See milestone https://phabricator.wikimedia.org/project/view/3169/ so I'd appreciate holding off doing anything in this area since we've spent a lot of time planning (see also Joaquin email to wikitech-l)

Change 431678 abandoned by Krinkle:
mobile.issues: Consolidate mobile.issues.images module

Reason:
Thanks, even better :-)

https://gerrit.wikimedia.org/r/431678

Krinkle triaged this task as Normal priority.May 8 2018, 6:03 PM
Krinkle edited projects, added Performance-Team (Radar); removed Performance-Team.
Krinkle updated the task description. (Show Details)

Change 431795 had a related patch set uploaded (by Krinkle; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Remove unused gray-triangle icon

https://gerrit.wikimedia.org/r/431795

Change 431795 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Remove unused gray-triangle icon

https://gerrit.wikimedia.org/r/431795

Vvjjkkii renamed this task from Reduce number of different MobileFrontend bundles to pfdaaaaaaa.Jul 1 2018, 1:11 AM
Vvjjkkii raised the priority of this task from Normal to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from pfdaaaaaaa to Reduce number of different MobileFrontend bundles.Jul 2 2018, 6:34 AM
CommunityTechBot lowered the priority of this task from High to Normal.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.
Jdlrobson closed this task as Resolved.EditedFeb 6 2019, 12:02 AM
Jdlrobson claimed this task.

@Krinkle after embracing Webpack, MobileFrontend has removed 24 ResourceLoader modules. 39 modules remain with the mobile. prefix (see https://www.mediawiki.org/wiki/Reading/Web/Projects/Invest_in_the_MobileFrontend_%26_MinervaNeue_frontend_architecture/Progress)

The remaining modules are necessary, but I see further changes that could get this down even further:

  1. Merge ResourceLoaderFileModule and ResourceLoaderImageModule

Of the remaining modules, 7 are image packs that could be merged into existing ResourceLoaderFile modules:
mobile.startup.images, mobile.startup.images.variants, mobile.nearby.images, mobile.editor.images, mobile.special.user.icons, mobile.userpage.icons, mobile.special.mobilediff.images
Right now, a ResourceLoader module must either be a File module or an icon pack and I'm not sure why.

  1. Bundle all special styles into single module

About 17 of the remaining modules are special page styles. We could merge all these modules into 2 modules: mobile.special.styles and mobile.special.scripts and using the class .mw-special-Watchlist to control styles and a switch statement to control the correct JS execution. This would of course mean an increase in bloat on special pages, but with the benefit of a shared stylesheet/JS file across all special pages.

  1. Change code splitting strategy

Right now we split by feature on mobile for features like the editor, echo notifications, image overlay, languages... we could instead have a critical JS bundle and bundle all features in a separate module. This would come at the cost of a larger bundle for editor etc.. but would mean we could remove around 7 modules ("mobile.editor.overlay", "mobile.talk.overlays", "mobile.categories.overlays", "mobile.notifications.overlay", "mobile.editor.ve", mobile.mediaViewer, mobile.languages.structured)

I'm closing this ticket, and requesting more specific tasks for those if any of those ideas resonate with you!