JavaScript: it is better to have one big file or multiple light files?

Question

Including many javascript files on the same page can lead to low performance. What I want to ask is: Is it best to keep separate files or include all files in one javascript file?

And if it is better to include everything in the same file Javascript, how can I avoid conflicts between different scripts?

Answer 1

It is best to keep separate files or include all files in one file Javascript?

To avoid multiple server requests, it is better to group all your JavaScript files into only one.

If you're using C#.Net + ASP.Net, you can bundle your files — it is a very good way to compress your scripts.

how can I avoid conflicts between different scripts?

You can use RequireJS; different names it is a good idea too; and every time that a plug-in/script ends, use ; to determine its end.

Performatic consideration

To maintain the productivity of your scripts, you should minify them.

Solution for a single page application

After you have minified your scripts, then group them all — regardless if they are plugins or your own code — into a single file and call it in your application.

Solution for a multiple page application

In this case, you should call just the necessary JavaScript for each page. How can you do this?

After you minified all of your scripts, then separate them in categories. Take a look to get the idea:

/assets/js/core.js — here you put your JavaScript code that is necessary to all of your pages. It is your core; your kernel;

/assets/js/plugins.js — here you put all the plugins that runs with all of your pages (i.e. jquery, backbone, knockout, and so on.);

/assets/js/home/bootstrap.js — here is the magic: in this file you have to fill with the code that your home will call;

/assets/js/contact/bootstrap.js — the same as before: this file you should to place with the code that your contact page will call.

HINT: core.js and plugins.js can occupy the same file when you deploy your application. To better comprehension and developing, it is good to maintain them into separated files.

Third party plugins

To give you an idea, the file of your plugins should be like this:

/* PlaceHolder plugin | http://www.placeholderjs.com/ | by @phowner */
; $(function(){ /* the placeholder's plugin goes here. */ });

/* Masked Inputs plugin | http://www.maskedjs.com/ | by @maskedowner */
; $(function(){ /* the masked input's plugin goes here. */ });

/* Mousewheel plugin | http://www.mousewheeljs.com/ | by @mousewheelowner */
; $(function(){ /* the mousewheel's plugin goes here. */ });

Answer 2

Serving one large single vs serving multiple small files depends on quite a few factors:

• do all clients require the exact same code base?
  • i.e. we probably don't need shim for modern browsers, so why serve it?
• do we change those files regularly?
  • caching files that don't change often can be used to reduce traffic
• do we want to use CDNs?
  • serving jQuery from New York to New York rather than shoving it around half the planet probably ammortizes an additional HTTP request (performance-wise at least)

Conflicts can be reduced/eliminated by introducing your own scope for each script. A common way is to use IIFEs/SIAFs and inject required variables.

A quick and simple example of an IIFE:

(function () { // IIFE
    var undefined = true;
})();

if (document.querySelectorAll === undefined) {
    // polyfill
}

If the content in the IIFE would execute in global scope, it would probably crash your polyfill. Since it is executed in a local (function) scope, you are pretty much safe from conflicts.

Note: usually, your polyfill should not be implemented in global scope as well.