Is it better to minify javascript into a single bundle for the whole site, or a specific-to-each-page bundle?

Question

When minifying JavaScripts together in web-development, is it better from the user-loading-time point of view to:

1. make one single big bundle of JavaScript cont

Answer 1

If you are implementing websites in ASP.NET MVC, then you may find the following approach as the most sensible, one which I use all the time.

Make a list of all of the JavaScript files used in the project - ones used everywhere and those used by many or most pages. This defines your common bundle, which you should include from your master page. MVC4's Bundle & Minification feature does the magic there, you just need to list them.

The rest of JavaScript is usually for local use, i.e. within just one view, effectively implementing the view. And for that reason it should reside within the view, completely uncompressed.

For example, I make extensive use of AngularJS within views, so each such view contains its own angular controller and other local elements as needed. Depending on the view complexity, it can even have its own set of directives, services and factories, although typically those go into a partial view of one-two levels up.

The bottom line is, do not try to burden yourself with bundling JavaScript that's meant for local use. Bundle only the most generic stuff, and do it in just one place - your product's master page. Leave local JavaScript uncompressed in local files where it is used. This has no real effect on performance, while making your code much easier to understand and maintain.