Page MenuHomePhabricator
Create Task
Maniphest T194098

Reduce number of different MobileFrontend bundles
Closed, ResolvedPublic
Actions

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:

Details

SubjectRepoBranchLines +/-
Remove unused gray-triangle iconmediawiki/extensions/MobileFrontendmaster+3 -23
mobile.issues: Consolidate mobile.issues.images modulemediawiki/extensions/MobileFrontendmaster+6 -9
Customize query in gerrit

Related Objects
Search...

Event Timeline

Krinkle created this task.May 7 2018, 11:29 PM
gerritbot subscribed.May 7 2018, 11:32 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

gerritbot added a project: Patch-For-Review.May 7 2018, 11:32 PM
Jdlrobson edited projects, added MobileFrontend (MobileFrontend and MinervaNeue architecture); removed MobileFrontend.May 8 2018, 12:27 AM

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)

gerritbot added a comment.May 8 2018, 5:29 PM

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 Medium priority.May 8 2018, 6:03 PM
Krinkle edited projects, added Performance-Team (Radar); removed Performance-Team.
Krinkle updated the task description. (Show Details)
gerritbot added a comment.May 8 2018, 6:04 PM

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

Krinkle mentioned this in T192623: ResourceLoader 2018 Review.May 10 2018, 1:03 PM
Krinkle moved this task from Limbo to Watching on the Performance-Team (Radar) board.May 21 2018, 8:34 PM
gerritbot added a comment.May 30 2018, 2:45 PM

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

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

Krinkle removed a project: Patch-For-Review.May 30 2018, 2:51 PM
ReleaseTaggerBot added a project: MW-1.32-notes (WMF-deploy-2018-06-05 (1.32.0-wmf.7)).May 30 2018, 5:01 PM
Krinkle removed a project: MW-1.32-notes (WMF-deploy-2018-06-05 (1.32.0-wmf.7)).Jun 14 2018, 8:10 PM
• 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 Medium to High.
• Vvjjkkii added projects: CheckUser, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), Tamil-Sites, Gamepress, Hashtags, Jade, KartoEditor, Language-2018-Apr-June, New-Editor-Experiences, Mail, TCB-Team (now WMDE-TechWish).
• 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 Medium.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot removed projects: TCB-Team (now WMDE-TechWish), Mail, New-Editor-Experiences, Language-2018-Apr-June, KartoEditor, Jade, Hashtags, Gamepress, Tamil-Sites, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), CheckUser.
CommunityTechBot added subscribers: gerritbot, Aklapper.
Krinkle edited parent tasks, added: T127328: Optimise critical rendering path; removed: T192623: ResourceLoader 2018 Review.Jul 6 2018, 10:56 PM
Krinkle mentioned this in T127328: Optimise critical rendering path.Jul 6 2018, 10:59 PM
Jdlrobson added a parent task: T195475: [EPIC] Automate asset bundling in MobileFrontend.Jul 9 2018, 4:44 PM
Jdlrobson moved this task from Backlog to PHP architecture on the MobileFrontend (MobileFrontend and MinervaNeue architecture) board.Aug 3 2018, 2:50 AM
Krinkle mentioned this in T202154: Audit modules 2018: Reduce registry overhead.Aug 17 2018, 6:17 PM
Jdlrobson moved this task from PHP architecture to Post-initial migration on the MobileFrontend (MobileFrontend and MinervaNeue architecture) board.Aug 30 2018, 1:31 AM
Jdlrobson moved this task from Post-initial migration to Code coverage on the MobileFrontend (MobileFrontend and MinervaNeue architecture) board.
Jdlrobson mentioned this in T207787: [EPIC] Reduce the amount of modules in MobileFrontend.Oct 23 2018, 7:56 PM
Krinkle moved this task from Watching to Perf issue on the Performance-Team (Radar) board.Jan 21 2019, 12:44 AM
Krinkle moved this task from Perf issue to Perf recommendation on the Performance-Team (Radar) board.Jan 21 2019, 12:58 AM
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!

Ladsgroup mentioned this in T228513: Start using webpack for dependency management and bundling.Jul 19 2019, 1:34 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL