Going into desktop refresh we will soon be working on features which will likely need JS and CSS resources. Currently Vector has 3 modules: skins.vector.styles, skins.vector.styles.responsive and skins.vector.js while Minerva has many more. More ResourceLoader modules leads to a larger initial JS payload which can negatively impact performance. Much time has been invested reducing modules in MobileFrontend and Minerva so it would be good to be proactive rather than reactive as we build out Vector.
How should we organize and manage ResourceLoader modules in Vector (and across all our projects, learning from MobileFrontend and Minerva).
Topics to discuss
- How will we separate styles for new Vector VS old Vector
- What code do we load on page load?
- What are the advantages of deferring the loading of code? When is it better not to?
- What code do we defer the loading of?
- How we bundle defer code?
- What are the advantages to merging modules? When is it better not to?
- Why do we use components folder and resources folder in Minerva
- Should we follow the components+resources pattern in Vector or revisit this pattern in Minerva?
- How big are the existing bundles loaded on page load?
- How can we shrink the size of the existing bundles?
- What changes in ResourceLoader can be made to reduce the number of modules in Vector learning from the modules we have in MobileFrontend and Minerva?
Output
- Decide how to organise CSS+JS in Vector
- Document existing patterns in reading web extensions
- Talk about it with the team
- Document agreed best practices (if any) on Reading page on mw.org