bundlesize has proven to be an invaluable and well-known tool for these measurements in Popups, MobileFrontend and 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. It is also now possible to store this configuration data in a separate file (e.g., bundlesize.config.json, package.json).
Acceptance criteria (skip if bundlesize is unused)
- bundlesize is added an NPM dependency to Vector and mw-vue-components.
- A bundlesize configuration file specifies the current sizing of each CSS ResourceLoader module / chunk to protect spikes in first paint in Vector and mw-vue-components.
- A patch that exceeds the maximum expected bundlesize fails jenkins-bot's tests (votes -1).
- Bundlesize reports are recorded in docs/bundleSizeMinGzip.txt (e.g: npm -s run test:size|grep dist > docs/minGzipBundleSize.txt) in Vector and mw-vue-components.
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
- 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.