Exclude arbitrary files from RequireJS's r.js optimisation and load them async

Question

I have RequireJS implemented fine, and a Grunt based build process which is optimising the JS app into one file via r.js which is also working fine. All my app files are concatenated into one for efficient production deployment.

The r.js optimisation is also including all my templates into the main app JS file too, which is also great for templates that will be needed as soon as the app boots up, or very soon afterwards. It's not so great for views that may never be seen, or perhaps be seen much later on in the app lifecycle, it'd be better if these templates were loaded async as needed.

So my question is this, is there a way to arbitrarily exclude my templates from being included into the monolithic app JS file and loaded async by RequireJS, or is this not supported? If it isn't supported what approaches are there for loading templates in async?

I'm using the tpl text template plugin and Backbone.Marionette. My template usage currently looks a bit like this:

define(function (require) {

    var Backbone = require("backbone");

    var tpl = require("tpl!./some-view-template.tpl");

    return Backbone.Marionette.ItemView.extend({
        template: tpl
    });
});

Answer 1

I think Require JS modules will solve your problem. I haven't tried lazy loading just the templates, but you can definitely separate components (views, models, templates) into Require JS modules and lazy load them.

Ben Nadel's blog post on this topic is very thorough on this topic. http://www.bennadel.com/blog/2404-Compiling-Optimizing-A-Subset-Of-A-RequireJS-Application.htm