ResourceLoader

Since MediaWiki 1.26, gadgets are now required to use ResourceLoader - see ResourceLoader/Migration guide (users) for more details.

ResourceLoader is the delivery system in MediaWiki for the optimized loading and managing of modules. Modules consist of JavaScript, CSS and interface messages. ResourceLoader was created in 2010 by Roan Kattouw, Trevor Parscal, and Timo Tijhof. The system was first released in 2011 as part of MediaWiki 1.17. It provides MediaWiki a high-performant front-end with strong caching while still allowing fast deployment of new code that all clients receive within minutes.

About ResourceLoader

Overview over the entire resource loading process of MediaWiki

→ See ResourceLoader/Features for a complete walk through of ResourceLoader

On Wikimedia wikis, every page view includes hundreds of kilobytes of JavaScript. In many cases, some or all of this code goes unused due to lack of browser support or because users do not make use of the features on the page. In these cases, bandwidth, and loading time spent on downloading, parsing and executing JavaScript code is wasted. This is especially true when users visit MediaWiki sites using older browsers like Internet Explorer 6, where almost all features are unsupported, and parsing and executing JavaScript is extremely slow.

ResourceLoader solves this problem by loading resources on-demand and only for browsers that can run them. Although there is much more to it, the overall flow for client-side performance can be summarized by these 3 points:

• Minifying and concatenating
  → which reduces the code's size and parsing/download time
  Both JavaScript files, CSS files and interface messages are loaded in a single special formatted "ResourceLoader Implement" server response.
• Batch loading
  → which reduces the number of requests made
  The server response for module loading supports loading multiple modules so that a single response contains multiple ResourceLoader Implements, which in itself contain the minified and concatenated result of multiple javascript/css files.
• Data URI embedding
  → which further reduces the number of requests, response time and bandwidth
  Optionally images referenced in stylesheets can be embedded as data URIs. Together with the gzipping of the server response, those embedded images, together, function as a "super sprite".

Documentation

Manuals

• Features – Complete overview of ResourceLoader features.
• Developing with ResourceLoader – notes on configuring your development environment and on switching ResourceLoader between development and production modes.
• Migration guide for extension developers – a guide to making extensions to work with ResourceLoader.
• Migration guide (users)
• Core modules – an overview of all core modules, supported with documentation and examples.
• Legacy JavaScript – index of legacy JavaScript functions that predate ResourceLoader modules.
• Vocabulary – the terminology used in ResourceLoader (such as Loader, Module, Requirement, etc.)

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
Navigation: video • slides

Low-hanging fruit vs. micro-optimization
Event: OSCON 2011 (2011-07-29)
Duration: 00:35:26
Navigation: 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
Navigation: video • slides • submission abstract

---

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

Planning

Past

• Requirements – requirements gathered during the creation of ResourceLoader.
• Version 1 Specification – the design document for the creation of ResourceLoader.
• Version 2 Specification – the design document for the 2011/2012 extension of ResourceLoader to support cross-wiki module loading.

Future

• phab:tag/mediawiki-resourceloader
• Tasks - Random uncategorized todo list
• /status

Mobile

The current implementation of the MediaWiki mobile view as provided by Extension:MobileFrontend has many caveats. For tips to using ResourceLoader to the best of its ability, please see Writing a mobile friendly ResourceLoader module.

ResourceLoaderResourceLoader
Documentation	FeaturesResourceLoader/Features · VocabularyResourceLoader/Vocabulary · Migration guide (users)ResourceLoader/Migration guide (users) · Migration guide (developers)ResourceLoader/Migration guide for extension developers · Developing with ResourceLoaderResourceLoader/Developing with ResourceLoader · Core modulesResourceLoader/Modules · Mobile supportResourceLoader/Writing a MobileFrontend friendly ResourceLoader module
Project information	Status updatesResourceLoader/status · Version 1 Design SpecificationResourceLoader/Version 1 Design Specification · Version 2 Design SpecificationResourceLoader/Version 2 Design Specification · RequirementsResourceLoader/Requirements
Other	JavaScript DeprecationsResourceLoader/Legacy JavaScript