Most Efficient Multipage RequireJS and Almond setup

Question

I have multiple pages on a site using RequireJS, and most pages have unique functionality. All of them share a host of common modules (jQuery, Backbone, and more); all of th

Answer 1

You can use any content delivery network (CDN) like MaxCDN to ensure your js files get served to everyone. Also I'll suggest you to put your js files in the footer of your html code. Hope that helps.

Answer 2

I think you've answered your own question pretty clearly.

For production, we do - as well as most companies I've worked with option 3.

Here are advantages of solution 3, and why I think you should use it:

• It utilizes the most caching, all common functionality is loaded once. Taking the least traffic and generating the fastest loading times when surfing multiple pages. Loading times of multiple pages are important and while the traffic on your side might not be significant compared to other resources you're loading, the clients will really appreciate the faster load times.
• It's the most logical, since commonly most files on the site share common functionality.

Here is an interesting advantage for solution 2:

• You send the least data to each page. If a lot of your visitors are one time, for example in a landing page - this is your best bet. Loading times can not be overestimated in importance in conversion oriented scenarios.

• Are your visitors repeat? some studies suggest that 40% of visitors come with an empty cache.

Other considerations:

• If most of your visitors visit a single page - consider option 2. Option 3 is great for sites where the average users visit multiple pages, but if the user visits a single page and that's all he sees - that's your best bet.

• If you have a lot of JavaScript. Consider loading some of it to give the user visual indication, and then loading the rest in a deferred way asynchronously (with script tag injection, or directly with require if you're already using it). The threshold for people noticing something is 'clunky' in the UI is normally about 100ms. An example of this is GMail's 'loading...' .

• Given that HTTP connections are Keep-Alive by default in HTTP/1.1 or with an additional header in HTTP/1.0 , sending multiple files is less of a problem than it was 5-10 years ago. Make sure you're sending the Keep-Alive header from your server for HTTP/1.0 clients.

Some general advice and reading material:

• JavaScript minification is a must, r.js for example does this nicely and your thought process in using it was correct. r.js also combines JavaScript which is a step in the right direction.
• As I suggested, defering JavaScript is really important too, and can drastically improve loading times. Defering execution will help your loading time look fast which is very important, a lot more important in some scenarios than actually loading fast.
• Anything you can load from a CDN like external resources you should load from a CDN. Some libraries people use today like jQuery are pretty bid (80kb), fetching them from a cache could really benefit you. In your example, I would not load Backbone, underscore and jQuery from your site, rather, I'd load them from a CDN.

Answer 3

FYI, I prefer to use option 3, following the example in https://github.com/requirejs/example-multipage-shim

I am not sure whether it is the most efficient.

However, I find it convienient because:

• Only need to configure the require.config (on the various libraries in one place)
• During r.js optimization, then decide which are the modules to group as common

Answer 4

I created example repository to demonstrate these 3 kinds of optimization.

It can help us to have better understanding of how to use r.js.

https://github.com/cloudchen/requirejs-bundle-examples

Answer 5

I prefer to use option 3,and i can surely tell you that why is that.

1. It's the most logical.
2. It utilizes the most caching, all common functionality is loaded once. Taking the least traffic and generating the fastest loading times when surfing multiple pages. Loading times of multiple pages are important and while the traffic on your side might not be significant compared to other resources you're loading, the clients will really appreciate the faster load times.

I have listed much better options for the same.