How do you bundle multiple AMD modules in a single file?

Question

AMD seems to be the best practice to load javascript modules as-needed.

This should work great on large web-apps where users only use a fraction of the available functionality.

I've read about the optimizer, which concatenates all required modules into a single file, and I've read about no optimization, i.e. loading each module with a async request.

Both don't seem to fit this use-case: loading every module with a request might quickly result in a large number of request, whereas optimizing forces you to download all the code.

Is there a way to bundle multiple modules into a single file?

Answer 1

Yes. Generally dividing application to so many files and loading them with AMD is only good for development. It helps to keep the code clean and understandable; it's quite logical that each module contains views, models, controllers and each of them is a separate file.

Yet that large number of request doesn't make sense in production. Thus you should use optimizer to compile and minimize files into one (or a few) to improve performance and user experience.

If you're using RequireJS please refer to http://requirejs.org/docs/optimization.html#wholeproject — it explains how to use r.js tool provided by RequireJS.

For example if my application was consisting of public area, administration and a very complex sign up form each build up with hundreds views/models/controllers I'd probably compile my code into just 4 files: common, public, admin, sign_up. Then appropriate file would be asynchronously loaded when user entered specific zone.

Answer 2

RequireJS supports this use-case with their optimization tool.

With the proper configuration in build.js, it can be configured to bundle multiple modules in multiple files.

Their mapping can be defined in build.js as shown in this example project