Page MenuHomePhabricator

MFA: mobile.mediaViewer is built with webpack (code splitting)
Closed, ResolvedPublic5 Estimated 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)
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 edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Tracking).
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 Incoming to Upcoming on the Web-Team-Backlog board.
Jdlrobson set the point value for this task to 5.Jan 7 2019, 6:35 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

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 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 subscribed.