[[ https://github.com/siddharthkp/bundlesize | bundlesize ]] has proven to be an invaluable and well-known tool for these measurements in [[ https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/Popups/+/406837/ | Popups ]], [[ https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/455243/ | MobileFrontend ]] and [[ https://gerrit.wikimedia.org/r/#/c/wikimedia/portals/+/406845/ | Portals ]] but require bundling. If we have bundling, maybe it's a nice file system test to have. If we don't have bundling, skip the below acceptance criteria.
Note: This has been done for Minerva. Learn from it generalising and following conventions where ever possible.
=== Acceptance criteria (skip if bundlesize is unused)
 `bundlesize` is added an NPM dependency.
 A `bundlesize` configuration file specifies the current sizing of each CSS ResourceLoader module to protect spikes in first paint.
 A patch that exceeds the maximum expected bundlesize fails jenkins-bot's tests (votes -1).
Use the CI's MediaWiki development environment to test the size of each module:
- `skins.vector.styles.legacy`: this should probably be carefully guarded. We don't want to increase the size of the legacy skin.
- `skins.vector.styles`: more leeway than legacy but should still be cautious.
- `skins.vector.js`: also a good dependency to be cautious on. This will help inform our loading strategy for larger dependencies like Vue.js itself.
- Any dynamic modules or module dependencies requested by the client. For example, if the Vue.js module is requested, let's consider it as an input into Vector's footprint.
It will be on us to remember to add new modules as they're added.
> Inside Quibble/CI and most mw-dev environments there are MW_* environment variables available. These are used by Selenium and QUnit jobs for example, which means if you're running either of those from the command-line locally today, you have them set up (e.g. saved in your bashrc file, or automatically by Docker/Vagrant).
> A few lines of bash or Node code to make a request to load.php would get you there. For example:
> #!/bin/bash -eu
> curl -fsS "$MW_SERVER/$MW_SCRIPT_PATH/load.php?lang=en&modules=skins.vector.styles.legacy&only=styles" > /tmp/output.css
> wc -c /tmp/output.css
> #> 33745 bytes
> gzip -9 -c /tmp/output.css | wc -c
> #> 7511 bytes
=== Acceptance criteria
-  Tests run in CI but not on precommit.
-  The listed modules are tested.
-  Modules and their expected sizes are easily extendable separate from the code.
-  Modules have some tolerance.