When using the requireJS optimizer, what's the advantages of buildlayered javascript?

问题

I'm trying my first attempts with the requireJs optimizer r.js (here) to prepare an application for production.

I can get everything to work and can uglify all of my js into a single main.js file, but one file, many questions...

Basic questions:

1. What is the Javascript buildlayer requireJs is talking about? My single file?

Right now I only optimized one module main.js, which bundles all dependencies into a single file (jquery, jquery-mobile, plus everything else required to get my app started).

Advanced questions:
Say on one page I'm using a graph done with jqplot, which uses xy additional javascript files I don't need anywhere else in my app.

1. What do I need to do to prevent these files from showing up in my main.built.js file?
2. Do I need to define a new module graph on the page I'm using the graph and then optimize this module to concat xy files into graph.built.js

Very advanced:
My page is made of gadgets = autonomous blocks of HTML/JS/CSS which I'm reusing throughout the application and which can be customized using JSON.

1. If loading gadgets via the requireJS !text plugin, where will my HTML files be "optimized to" A large single HTML file?
2. If I only want to load the gadgets I need on each page, do I have to create a module per page with dependencies for each gadget and then optimize module index_page, module page_with_graph, etc. to make sure only what's needed gets loaded?
3. If doing so, will re-request gadgets on every page vs caching?

Thanks for sheding some insights!

回答1:

Great guestions!

Basic questions:

What is the Javascript buildlayer requireJs is talking about? My single file?

Firstlly, lets rephrase buildlayer as "bundle", it has more objective meaning. So its concatinated modules set. It could be single - if you put or your modules in one build or few if you would like to build specified build for some pages.

Advanced questions:

What do I need to do to prevent these files from showing up in my main.built.js file?

First of all, here is a very usefull link i have in bookmarks - https://github.com/jrburke/r.js/blob/master/build/example.build.js

In a few words you can configure modules section in r.js configs managing include and exlcude rules to reach the goal

Do I need to define a new module graph on the page I'm using the graph and then optimize this module to concat xy files into graph.built.js

You can just use shim and request in on demand on other modules

Very advanced:

If loading gadgets via the requireJS !text plugin, where will my HTML files be "optimized to" A large single HTML file?

Nope, it will be in build.js. This result i had loading templates via !text

If I only want to load the gadgets I need on each page, do I have to create a module per page with dependencies for each gadget and then optimize module index_page, module page_with_graph, etc. to make sure only what's needed gets loaded?

You can build own buldle for each page, but this is not the best idea. When i had similar question i've decided to build one bundle because of two reasons - it loads ones, its more easy to control cache on CDN and decrease possible errors and mistakes. But if you need separate bundles follow the link a've posted to the modules section.

If doing so, will re-request gadgets on every page vs caching

So if you load the page and have dep1 in 10 modules dependencies file will be loaded once (if you dont have it in buld.js) and then injected in modules. When you reload the page file may be get from browser cache or loaded again according browser config.

Hope it will help.

来源：https://stackoverflow.com/questions/16088183/when-using-the-requirejs-optimizer-whats-the-advantages-of-buildlayered-javasc