What is the best practice to include js/css files in an enterprise application framework?

Question

I am working on an enterprise application development in ASP.NET MVC3. Of-course I have different master layouts and multiple views.

My concerns

• Including all js/css files in master layout might affect the performance of the page
• Including the files in views (where it is required) are creating duplicate references (kick-off jquery/other libraries)
• More the references, the more the back&forth requests between client and server - which in turn affect the performance of the output page

My Thoughts

1. Create a custom list of required resources and store it in ViewBag. Let the master layout refer this object to include the js/css files
2. Or add the link referring an action with some key (an unique value to identify the page being rendered) and dynamically generate an output with all required resources as a single response. And cache the output (inmem/staticfile) with the unique key for succeeding requests. A kind of custom resource bundling.

Please share your ideas, any thoughts and suggestions are welcome!

EDIT: Sep.17.2012

Below answers are more talking about optimization techniques in web application development world - appreciating those answers.

I would like to discuss from an architectural perspective, focusing on creating a dynamic resource collection required by the page being rendered.

For example, in specific views I would like to use jQuery UI which requires jquery-ui-1.8.11.min.js, and in certain views I would like to use MVC3 ajax which requires MicrosoftMvcAjax.js and jquery.unobtrusive-ajax.min.js

I don't want to include permanent reference in master layout, which will result in loading these js for all views. Rather I would like to include the js files dynamic during runtime.

Hope this might have added clarity!

Thanks for the help - Vinod

Answer 1

You need to think about reducing your download size first:

• putting all your js and css into as few files as possible. This is because a client can only open 2 HTTP channels (most browsers now support more, info here) at any one time, all file downloads after this are queued until the previous ones finish downloading.
• minify your js and css.

Once you've got this down to a reasonable size then you can think about the above. You want to download, the smallest amount of content upfront, so in the master. This will improve performance because then the client can cache it. Caching is a good thing, this stops the client having to request the js and css every time they visit a page on your site.

You might also want to think about applying HTTP expiry headers.

Yahoo do a good site on lots of these ideas: http://developer.yahoo.com/performance/rules.html

Also don't put your js in the viewbag. This is unnecessary overhead and load on the server. Just add a reference in your pages!

MVC4 now supports bundling