javascript - How to achieve lazy loading with RequireJS? -

we're building non-trival web application using backbone, requirejs , handlebars, , well, i'm curious. @ moment, each of our models sorta looks this:

define(['backbone', 'js/thing/a', 'js/thing/b', 'js/lib/bob'], function(a, b, bob) {   return backbone.router.extend({     // stuff here   }); }); 

where thing/a, thing/b both have own dependencies, example on handlebars templates, etc. happens in main.js, of 'top-level' routers loaded , initialized; each top-level router has set of dependencies (models, views, etc) each have own dependencies (templates, helpers, utils, etc). basically, big tree structure.

the problem in case entire tree resolved , loaded on page load. don't mind per sé, we'll run through optimizer , end 1 big single file (reducing requirejs modularization framework). however, curious whether can load stuff views , templates 'on demand'.

there "simplified commonjs wrapping" explained here, tried that:

define(function(require) {   backbone = require('backbone');   return backbone.router.extend({     dostuff: function() {       var myview = require('js/myview');       new myview().render();     }   }); }); 

however, looking @ chrome's network inspector, seems requirejs - somehow, without triggering route triggers dostuff handler - still loads myview dependency. questions:

• is possible? there black magicks in requirejs looks calls require() without triggering dostuff route?
• is theoretically correct way of going 'on-demand', lazy loading of requirejs modules , resources?
• does r.js optimizer still work advertised if use notation?

is possible? there black magicks in requirejs looks calls require() without triggering dostuff route?

when use 'sugar' syntax it uses function.prototype.tostring , regex extract references require , lists them dependencies before running function. becomes normal style of define array of deps first argument.

because of this, doesn't care require calls , that's why conditional statements ignored (it explains why require calls have use string literal, , not variable).

is theoretically correct way of going 'on-demand', lazy loading of requirejs modules , resources?

using sugar syntax won't allow conditional loading you've seen. way can think of off top of head use require call array of deps , callback:

define(function(require) {     var module1 = require('module1');      // load if condition true     if (true) {         require(['module2'], function(module2) {          });     }      return {}; }); 

only downside nested function if you're after performance valid route.

does r.js optimizer still work advertised if use notation?

if you're using 'sugar' syntax yes, optimiser work fine. example:

modules/test.js

define(function(require) {     var $ = require('jquery');     var _ = require('underscore');      return {         bla: true     } }); 

once compiled r.js looks like:

define('modules/test', ['require', 'jquery', 'underscore'], function(require) {     var $ = require('jquery');     var _ = require('underscore');      return {         bla: true     } }); 

in conclusion can load stuff conditionally, mentioned, if intend optimise project r.js there isn't huge overhead in using sugar syntax.