Question

Using Require.js and it works pretty solid.

However, I’m reading about optimization (http://requirejs.org/docs/optimization.html) using r.js.

To my understanding it bundles top-level defined modules into 1 file (great because: less http-calls, minified ) .

This seems fine when I only have 1 pagetype defined, i.e: 1 set of required modules to load. However, in any normal site, you’d have multiple pagetypes each requiring different modules.

Now, I’m just wondering how clever r.js really is? Does it take all the multiple pages (with different ‘requires’) into account when determining which modules to package together, so that I don’t end up with X bundled javascriptf-iles for X pagetypes, even though there’s substantial overlap in the modules included in each of these bundled scripts.

Any hints I need to give to the optimizer, is it handled automatically, etc?

Clarification much appreciated,.

Answer 1

What I understand is that the optimizer finds dependencies for a file by looking for require() calls, and makes a list of what it finds. (So it only finds dependencies passed to require() as literal strings.) Then the file is combined with its dependencies (recursively) into one file, and minimized.

You can control what goes into a module in the configuration. Here’s a sample:

({

baseUrl: "Website/Scripts",
dir: "Staging/Scripts",
modules: [
    { name: "main", include: ["Rotator"], exclude: ["jwPlayerDialog"] },
    { name: "jwPlayerDialog" }
],
paths: {
    "jquery": "empty:"
},
fileExclusionRegExp: /^\.|Microsoft|modernizr|unobtrusive|\.min\.|\.debug\./
})

If you turn off minimization, you can easily see what’s being included in each file. A module could be included in more than one file. For example, the Rotator module above will be in main.js, and it will still be available as Rotator.js.