New subject: Best practices for loading large, pre-minified JavaScript modules?

13 Jul 2014

I've started experimenting with embedding my ogv.js media player into
TimedMediaHandler to provide Ogg playback in Safari and Internet Explorer:
https://gerrit.wikimedia.org/r/#/c/145756/

This involves on-demand loading of a fairly large chunk of mostly
machine-generated, dense, pre-minified JavaScript that weighs in around a
megabyte (gzips to 250k or so).

Initially I tried tossing it in with the ResourceLoader modules and loading
it with mw.loader.using(), but in some configurations the automatic JS
minification in ResourceLoader was taking too long to process the file. (On
MediaWiki-Vagrant with Zend PHP and Xdebug enabled, it actually hit the
30-second execution limit. Ouch!)

I couldn't find a way to disable minification for a particular module; it
looks like it's applied as a filter step after modules are bundled
together, so I'm not sure it's really possible.

Currently I'm loading the ogv.js payload as a separate file with
$.ajax({dataType:'script'}); this totally bypasses ResourceLoader and thus
the minifier, but gzipping is dependent on the web server configuration.
(MediaWiki-Vagrant's Apache configuration auto-gzips .js files, so yay!)

I also lose other ResourceLoader features like automatic cache
invalidation; for now I'm appending a  version parameter on the URL to
ensure that the file is re-cached when updated, but it has to be manually
updated along with the JS payload file.

Any recommendations for making ResourceLoader and large, pre-minified JS
sources fit together better? Or is what I'm doing pretty much the best
practice for now? :)

I'm considering a 'stub' ResourceLoaderModule subclass that generates the
$.ajax() loader call including an automatic version timestamp URL parameter
from the file's last-modification time...

-- brion