How to achieve lazy loading with RequireJS?

Question

We\'re building a non-trival web application using Backbone, RequireJS and Handlebars, and well, I\'m just curious. At the moment, each of our models sorta looks like this:<

Answer 1

You may also want to check out require-lazy.

It has a runtime component and a build time component. The runtime component allows you to lazily require a module as (note the lazy! plugin):

define(["lazy!mymodule"], function(mymodule) {
    ...
});

In the previous context, mymodule is a promise, the real module will be loaded with get() and will be made available in the then() callback:

mymodule.get().then(function(m) {
    // here m is the real mymodule
});

Require-lazy integrates with r.js to automatically create "bundles" of Javascript files. It also handles automatically cache-busting for the bundles. There are several examples to get an idea. There is also Grunt and Bower integration.