Page MenuHomePhabricator

Modularize CX2 Resource Loader definition
Closed, ResolvedPublic

Description

The single RL model mw.cx.visualeditor is growing and it has everything related to the integration. It should be split into small logical groups with correct dependencies.

This split up may also help us defer some RL modules from page load.

Details

Related Gerrit Patches:
mediawiki/extensions/ContentTranslation : masterRefactor the mw.cx.visualEditor RL module to logical groups

Event Timeline

santhosh created this task.May 2 2018, 10:08 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 2 2018, 10:08 AM
santhosh triaged this task as High priority.May 2 2018, 10:08 AM
santhosh moved this task from Backlog to Priority backlog on the Language-2018-Apr-June board.

Can you explain why this is a high priority issue?

  35   133   923 ve-cx/dm/ve.dm.CXTranslationUnitModel.js
  61   190  2053 ve-cx/dm/ve.dm.CXLinkAnnotation.js
  73   183  1982 ve-cx/dm/ve.dm.CXSentenceSegmentAnnotation.js
  54   200  1577 ve-cx/dm/mixins/ve.dm.CXLintableNode.js
 121   404  3613 ve-cx/dm/ve.dm.CXSectionNode.js
 105   378  3227 ve-cx/dm/ve.dm.CXBlockImageNode.js
  34    90   917 ve-cx/dm/ve.dm.CXImageCaptionNode.js
  56   159  1612 ve-cx/dm/ve.dm.CXPlaceholderNode.js
  53   162  1419 ve-cx/ce/ve.ce.CXLinkAnnotation.js
  43   111  1179 ve-cx/ce/ve.ce.CXSentenceSegmentAnnotation.js
  52   129  1286 ve-cx/ce/ve.ce.CXSectionNode.js
  44   108  1021 ve-cx/ce/ve.ce.CXBlockImageNode.js
  27    64   647 ve-cx/ce/ve.ce.CXImageCaptionNode.js
  68   171  1720 ve-cx/ce/ve.ce.CXPlaceholderNode.js
 106   293  3488 ve-cx/ui/ve.ui.CXDestinationTool.js
  35   138  1174 ve-cx/ui/ve.ui.CXTranslationUnitContextItem.js
 118   352  3616 ve-cx/ui/ve.ui.CXLinkContextItem.js
 222   635  6052 ve-cx/ui/ve.ui.CXSectionContextItem.js
  33    71   902 ve-cx/ui/ve.ui.CXLinkAnnotationInspector.js
  16    37   442 ve-cx/ui/ve.ui.CXLinkAnnotationWidget.js
 114   436  3959 ve-cx/ui/ve.ui.CXTranslationToolbar.js
  72   209  1708 ve-cx/ui/actions/ve.ui.CXTranslationAction.js
1542  4653 44517 total

We are talking about 44 KB of uncompressed code. Maybe we could deferred loading some of the files, but I doubt that's more than 20% of the size. In addition that deferral can introduce latencies later when people are actually trying to use the tool.

Let's have look at the big picture:

namesize
ext.visualEditor.core799.0 KiB
oojs-ui-core149.8 KiB
oojs-ui-widgets124.4 KiB
oojs-ui.styles.icons-editing-advanced90.3 KiB
ext.visualEditor.mwtransclusion87.0 KiB
moment85.7 KiB
ext.visualEditor.mwcore76.3 KiB
ext.visualEditor.mwmeta70.4 KiB
oojs-ui-core.styles61.2 KiB
unicodejs56.7 KiB
ext.visualEditor.mwimage52.7 KiB
oojs-ui.styles.icons-interactions52.3 KiB
oojs-ui-windows51.5 KiB
ext.visualEditor.diffing45.1 KiB
mw.cx.visualEditor40.7 KiB
ext.visualEditor.mwlink40.4 KiB
oojs-ui-toolbars39.8 KiB
ext.visualEditor.mwgallery37.9 KiB
oojs-ui.styles.icons-content37.2 KiB
oojs-ui.styles.icons-moderation36.8 KiB
ext.visualEditor.mwlanguage36.6 KiB
ext.cite.visualEditor36.3 KiB
diffMatchPatch35.9 KiB
jquery.uls.data33.7 KiB
ext.visualEditor.base32.8 KiB
oojs-ui.styles.icons-editing-styling30.6 KiB
easy-deflate.deflate29.6 KiB
ext.cite.visualEditor.core27.1 KiB
mediawiki.widgets.MediaSearch26.1 KiB
mediawiki.widgets.DateInputWidget26.0 KiB
ext.visualEditor.mwimage.core25.8 KiB
papaparse25.7 KiB
ext.visualEditor.desktopArticleTarget.init25.6 KiB
ext.geshi.visualEditor25.5 KiB
oojs-ui.styles.icons-media25.3 KiB

Smaller modules are omitted from the list. I believe there is some low hanging fruit here, like the diffing code that is probably not needed. I don't think it makes sense to optimize 41 KiB when we are loading over 1 MiB in dependencies.

In fact I would argue that we have a different problem: the extension.json is becoming very large and unmanageable because we have too many resource loader modules. It also puts pressure on the resource loader system and the list of all known resource loader modules is shipped with every page view as far as I remember.

I think we should group files together in logical modules to reduce the number of modules that we define and to simplify dependencies.

I made a chart that shows our internal depdendencies (external and dynamic dependencies are not shown). That's not manageable and I think it should be.

I think we should group files together in logical modules to reduce the number of modules that we define and to simplify dependencies.

I meant to address only this.

Change 432071 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Refactor the mw.cx.visualEditor RL module to logical groups

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

FYI: CX mentioned near the end of the description of T192623: ResourceLoader 2018 Review

Arrbee assigned this task to santhosh.May 14 2018, 7:09 AM

Change 432071 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Refactor the mw.cx.visualEditor RL module to logical groups

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

Etonkovidova closed this task as Resolved.May 29 2018, 12:13 AM
Vvjjkkii renamed this task from Modularize CX2 Resource Loader definition to 7sdaaaaaaa.Jul 1 2018, 1:13 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed santhosh as the assignee of this task.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
ToBeFree renamed this task from 7sdaaaaaaa to Modularize CX2 Resource Loader definition.Jul 1 2018, 11:06 PM
ToBeFree closed this task as Resolved.
ToBeFree assigned this task to santhosh.
ToBeFree updated the task description. (Show Details)
ToBeFree added subscribers: gerritbot, Aklapper.