How to use the YUI3 lazy loader to speed up a site

One of the best features of YUI3 is it’s lazy loader functionality. Using the loader means that you no longer have to specifically include your YUI javascript files, the loader will include any files that your page needs for you, neat!

To use the lazy loader you must register all of your custom YUI modules in a config object and then pass this object into YUI. Within the config object you can register any custom YUI module with it’s file name/location and any modules that it requires.

Whenever you use a module YUI will check to see if it is already loaded, if not then your config will be checked for the module, if it is found then YUI will attempt to load the module by included the associated javascript file on the page. It does this by writing a javascript include tag at the bottom of your pages head element.

Here is a sample lazy loader config:

var config = {
  "timeout": 1000,
  "groups":
  {
    "plugins":
    {
      "base":"/js/yui/plugins/",
      "modules":
      {
        "best-plugin-ever":
        {
          "path":"best-plugin-ever.js",
          "requires":["plugin","node","event"]
        },
        "another-awesome-plugin":
        {
          "path":"another-awesome-plugin.js",
          "requires":["plugin","node","event", "io"]
        },
      }
    },
    "widgets":
    {
      "base":"/js/yui/widgets/",
      "modules":
      {
        "widgety-widget":
        {
          "path":"widgety-widget.js",
          "requires":["widget", "plugin", "event", "node", "event-custom"]
        },
        "toaster-widget":
        {
          "path":"toaster-widget.js",
          "requires":["widget", "plugin", "event", "node", "widgety-widget"]
        },
      }
    }
  }
};

There are many more options available but normahttp://www.dave-o-reed.co.uk/wp-admin/post.php?post=140&action=edit&message=1lly I simply give a timeout as the default is none and then simply list all of my custom modules grouped by there type. You can have as many groups as you want and you can name them whatever you want, I use groups for specifying different base paths as I tend to keep my JS modules in a vaguely organised folder structure.

You can either write your config object directly onto your page or you can put it into a separate JS file and include it on your page. To actually use your config you have a few options, you can pass your config object into your YUI.use calls like so:

YUI(config).use('best-plugin-ever', 'toaster-widget', 'node', function(Y) {
    // Amazing code
});

YUI can also be configured globally so you don’t have to load the config everytime:

YUI.GlobalConfig = {
  "timeout": 1000,
  "groups":
  {
    "plugins":
    {
       // etcettera
};

There are many other options for loading your custom config, but you can read about them in YUI’s documentation. Using the loader means that you will only include the javacsript files that you need on your pages without the need for separate config files and whatnot.

References and further reading

Wikipedia entry on the lazy loader pattern

YUI global object

YUI loader object