Using the optimizer in requirejs to group and load files

Question

We have just started using requirejs in our project and we are loving it. Currently we are just using it to manage our many jQuery plugins the site runs on, so are barely scratching the surface of its potential… but due to time constraints this has to wait.

I'm having some problems getting the optimizer play as I'd like it to, I wonder if you could tell me if it is even possible to do this. My directory structure:

> /common/
> /common/*.js - common plugins used on most pages on the site
> /infrequent/
> /infrequent/infrequentModule.js
> /infrequent/ckeditor
> /infrequent/ckeditor/1000s.js
> /require.js
> /jquery.js
> /main.js - this file contains all scripts in common. It looks at the page and call the necessary plugins.

Optimization/build hopes:

main.js would contain all the common scripts. On most pages this script will be the only one loaded (except require.js)
main.js looks at the page, if it see's that it needs an infrequent plugin/module it loads that async. So on a infrequent page I may load require.js, main.js and infrequentModule.js.

I have tried various methods in the build script to exclude and include files to get the desired results but to no avail. Does anyone have any ideas or know if this is, in fact, even possible?

Ad Taylor Ad Taylor · Accepted Answer · 2011-03-22T11:45:06

OK, so I got some great answers on the google group for require.js - http://groups.google.com/group/requirejs/browse_thread/thread/359b02473f4e707

The following is a useful answer I was given that I hope may help out someone else…

Hi, I am currently doing this in one of my projects, here is my build.js:

paths: { 
                //load libs from cdn 
                "jqueryUI": "jqueryUI", //temp static file for build 
                "swfobject": "swfobject", //temp static file for build 
                "Templates": "../Templates/Settings" 
        }, 
modules: [{ 
            name: "appName", 
                        excludeShallow: ["jqueryUI", "swfobject", "Modules/ 
module.preferences"] 
        }

Then in one of my modules I have a require call for Modules/ module.preferences which I execute when I need it:

function loadPreferences(){ 
 require(["Modules/module.preferences"],function(){ 
                     //Execute some init code after the module has 
loaded 
         }) 
 } 
}

This achieves what you described where I have require and main loaded on page load, then module.preferences loads async when I need it. Hope that helps, Jeff.

Using the optimizer in requirejs to group and load files

1 Answers