Description
During Q3 we conducted a detailed analysis of the Front End performance issues, origin and mitigation strategies.
As part of the goal to reduce the number of components rendered in the page, we want to remove unnecessary component abstractions.
Source: https://vuejs.org/guide/best-practices/performance#avoid-unnecessary-component-abstractions
The following template components are widely used and only offer code reusability:
- LocalizedLabel.vue
- KeyBlock.vue
- KeyValueBlock.vue
As displayed in the Component count breakdown section, removing these components would mean:
- Z4 (view page): reduction of 321 components (1304→983)
- Z4 (edit page): reduction of 528 components (4182→3654)
- Z6821(Q818363) (full object, expanded): reduction of 911 components (2918→2007)
- Z6821(Q818363) (4 item lists object, expanded): reduction of 185 components (632→447)
Desired behavior/Acceptance criteria
- Components that use template components or abstractions, simply render the HTML directly.
- Unnecessary template components are only used if they don't add too much load to the component count. (e.g. LocalizedLabel, KeyBlock and KeyValueBlock are found in the hundreds)
Completion checklist
- Before closing this task, review one by one the checklist available here: https://www.mediawiki.org/wiki/Abstract_Wikipedia_team/Definition_of_Done#Front-end_Task/Bug_Completion_Checklist