Page MenuHomePhabricator

MFA: mobile.mediaViewer is built with webpack (code splitting)
Closed, ResolvedPublic5 Story Points

Description

Code relating to the toggle code currently lives in mobile.mediaViewer and we will move it to webpack.

Similar to the language feature it is lazy loaded thus its essential we've worked out a strategy before taking on this task.

Precursors

Acceptance criteria

  • code for mobile.mediaViewer module compiled in webpack
  • code for mobile.mediaViewer is not loaded on the critical path - it is delayed until an image is clicked (see also T210210)
  • critical js size (mobile.startup.js + mobile.common.js) has not increased. Beware of any modules that are shared among the lazy loaded chunks and are not in mobile.startup.js. Webpack will excise these into mobile.common.js and increase our critical js size.
  • tests are ported to node-qunit
  • Minerva is retained in a mergeable state throughout the migration. No need to worry about cached html but an alias module (empty module with mobile.startup dependency) will be needed until references in Minerva have been updated.

Code:

Sign off steps

  • Progress is updated.
  • Make a new card for porting mobile.notifications.overlay to webpack.
  • Make a new card for porting mobile.category.overlay to webpack
  • Make a new card for porting mobile.talk.overlays to webpack

Event Timeline

Jdlrobson renamed this task from mobile.mediaViewer is bundled in mobile.startup to mobile.mediaViewer is built with webpack.Nov 22 2018, 10:54 PM
Jdlrobson updated the task description. (Show Details)
Restricted Application added a subscriber: Gilles. · View Herald TranscriptNov 22 2018, 10:54 PM
Jdlrobson updated the task description. (Show Details)Nov 22 2018, 10:57 PM
Jdlrobson renamed this task from mobile.mediaViewer is built with webpack to mobile.mediaViewer is built with webpack (code splitting).Dec 14 2018, 10:03 PM
Jdlrobson triaged this task as High priority.
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from mobile.mediaViewer is built with webpack (code splitting) to MFA: mobile.mediaViewer is built with webpack (code splitting).Dec 17 2018, 4:37 PM
Jdlrobson moved this task from To Triage to Upcoming on the Readers-Web-Backlog board.
Jdlrobson set the point value for this task to 5.Jan 7 2019, 6:35 PM
nray updated the task description. (Show Details)Jan 7 2019, 7:50 PM
nray updated the task description. (Show Details)Jan 7 2019, 7:55 PM
Jdlrobson updated the task description. (Show Details)Jan 7 2019, 8:08 PM
Jdlrobson updated the task description. (Show Details)Jan 7 2019, 11:11 PM

Change 482735 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] mobile.mediaViewer is now bundled via webpack

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

Change 482735 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] mobile.mediaViewer is now bundled via webpack

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

nray claimed this task.Jan 10 2019, 6:05 PM
Jdlrobson updated the task description. (Show Details)Jan 10 2019, 7:35 PM
Jdlrobson updated the task description. (Show Details)Jan 11 2019, 1:20 AM
nray added a comment.EditedJan 11 2019, 10:16 PM

Commit: f4387e9dfa5a55f3af681f0aabd3b17ead464693 (this card's commit)
curl -i -H 'Accept-Encoding: gzip' 'http://localhost:8181/w/load.php?debug=false&lang=en&modules=mobile.startup&skin=minerva' | wc -c
22436

Commit 80b5740f6a826b40fb65ddd8a0b8fa037e6819b7 (prior to this card's commit)
curl -i -H 'Accept-Encoding: gzip' 'http://localhost:8181/w/load.php?debug=false&lang=en&modules=mobile.startup&skin=minerva' | wc -c
22417

I think +19 byte difference for critical js size is acceptable

nray closed this task as Resolved.Jan 11 2019, 10:22 PM
nray removed nray as the assignee of this task.
nray updated the task description. (Show Details)
nray updated the task description. (Show Details)
nray updated the task description. (Show Details)
nray added a subscriber: nray.