Background
ResourceLoader is the name for the feature that allows us to add JavaScript and CSS to a page. This task will provide an introduction to ResourceLoader and its complexities that will aid you in any change you make in future. It will also introduce you to how caching works in Wikimedia sites. The goal of this ticket is to consolidate how we load code on pages. It should have no visual changes.
Minerva has 2 modules for shipping styles - skins.minerva.base.styles, skins.minerva.mainMenu.styles and skins.minerva.content.styles that are loaded on page load and 2 modules for icons - skins.minerva.mainMenu.icons and skins.minerva.icons.wikimedia.
Every ResourceLoader module we create increases the amount of render blocking JS we ship as ResourceLoader needs to build a dependency tree of how modules relate to one another. As a result, ideally we minimize the amount of modules we ship in production.
Acceptance criteria
- The contents of skins.minerva.base.styles and skins.minerva.mainMenu.styles are merged (as demonstrated in this patch https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1077998)
- A new module skins.minerva.styles is the only styles module in Minerva (ignoring icons) and combines the contents of skins.minerva.base.styles and skins.minerva.mainMenu.styles
- Newly generated HTML will add the skins.minerva.styles module.
- For cached HTML, keep skins.minerva.base.styles and skins.minerva.mainMenu.styles but mark them as a deprecated. New HTML should not add them to the page.
- The bundlesize definitions in bundlesize.config.json are updated
- Merge the skins.minerva.icons.wikimedia and skins.minerva.mainMenu.icons modules.
- Drop .minerva-icon--{name}-base20 and .minerva-icon--{name}-disabled variants since these are no longer utilized and only serve cached HTML. The change in 1078492 means this can be safely done after the 1.43.0-wmf.27 release has happened (Tuesday 22nd at earliest).
- Run Pixel and make sure there are no visual changes with your work.
- Drop the skins.minerva.base.styles and skins.minerva.mainMenu.styles modules. In the process reorganize the files in the resources/skins.minerva.styles folder (we should aim to merge this patch on 19th at the earliest given we know caching can be a problem for a 2 week period)
Developer notes
For cached HTML the 2 modules are retained for a week referencing the files in the new skin.minerva.styles module.
QA
We can use Pixel to test this. No need for manual testing.
Description Text
Requirement
Consolidate ResourceLoader modules in the Minerva skin to reduce complexity and improve performance without introducing visual changes.
BDD
Feature: Consolidate ResourceLoader Modules in Minerva
Scenario: Verify consolidated ResourceLoader modules in Minerva
Given the Minerva skin uses consolidated modules
When the page loads on mobile
Then the contents of skins.minerva.base.styles and skins.minerva.mainMenu.styles are combined into a single module skins.minerva.styles
And cached HTML retains skins.minerva.base.styles and skins.minerva.mainMenu.styles but marks them deprecated
And skins.minerva.icons.wikimedia and skins.minerva.mainMenu.icons are merged into one module
And .minerva-icon--{name}-base20 and .minerva-icon--{name}-disabled classes are removed
And there are no visual changes after these updatesTest Steps
Test Case 1: Verify Consolidation of ResourceLoader Modules in Minerva
- Visit the Pixel report for mobile skin.
- AC1: Confirm that there are no errors reported in the Pixel report related to this change.
