ResourceLoader

ResourceLoader is the delivery system in MediaWiki for JavaScript, CSS, interface icons, and localisation text. It was first deployed to Wikipedia in 2011 and released later that year as part of MediaWiki 1.17.

It is responsible for MediaWiki's low-cost high-performant front end, built on three principles that enable quick deployment of new code seen by Web clients on all pages in less than 5 minutes.

About ResourceLoader

The page loading process for MediaWiki.

→ See ResourceLoader/Architecture to learn about the system's principles and overall design.

ResourceLoader was created in 2010 by Roan Kattouw, Trevor Parscal, and Timo Tijhof.

On Wikipedia, every page view involves hundreds of kilobytes of JavaScript code.

ResourceLoader loads script and style resources on-demand and only for browsers that are capable of running them. Some highlighted features:

• Minifying and concatenating
  → This reduces the size of the code, saving bandwidth cost and download time.
  Both JavaScript files, CSS files and interface messages are loaded in a single request.
• Batch loading and local cache defragmentation
  → This reduces the number of requests made.
  The server can provide multiple module bundles in response to a single request from the browser. These are unpacked in the browser and can be re-used from the cache on subsequent page views even if they need a different set of modules
• Bundle static files with generated data and virtual files → This allow granular configuration without overhead of additional API requests. A module can contain static files but also generated data from PHP, and virtual files that represent source code from an external source (e.g. a wiki page).

Documentation

Manuals

• Architecture – overview of ResourceLoader's architecture and how its features work.
• Developing with ResourceLoader – how to create, register and load modules in MediaWiki core and extensions.
• Core modules – documentation for of all built-in modules that ship with MediaWiki core.
• Package modules – How to use ResourceLoader with packageFiles.

Migration guides

• Migration guide for extension developers – help convert legacy JavaScript to ResourceLoader.
• Migration guide (users) - convert gadgets and user scripts from before 2015 to use ResourceLoader

Presentations

These presentations detail the purpose and results of ResourceLoader.

Creative Techniques for Loading Web Pages Faster
Event: Linux Conf Australia 2012 (2012-01-17)
Duration: 00:47:01
Links: video • slides

Low-hanging fruit vs. micro-optimization
Event: OSCON 2011 (2011-07-29)
Duration: 00:35:26
Links: video • slides • slides + notes

---

A very complete presentation of why, how and what ResourceLoader does.

Tutorials

These presentations go more in-depth towards developers already familiar with MediaWiki development.

Introduction to ResourceLoader
Event: Wikimania 2011 (2011-08-05)
Duration: 00:22:40
Links: video • slides • submission abstract

---

A walk through ResourceLoader's features and how to develop with it in a MediaWiki extension.

Code stewardship

• Maintained by Performance Team.
• Issue tracker: Phabricator (Report an issue)