CODEWITHSUNDEEP
javascripthtmlperformance
CastenettoA
CastenettoA

Reputation: 693

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

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?

Upvotes: 13

Views: 8264

Answers (4)

Guilherme Oderdenge
Guilherme Oderdenge

Reputation: 5001

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. */ });

Upvotes: 13

Bryan Legend
Bryan Legend

Reputation: 6896

It's generally better to bundle. If you are using Visual Studio you can use the Web Essentials bundling for JS, CSS, and even image sprites.

http://vswebessentials.com/features/bundling

Upvotes: 0

fjdumont
fjdumont

Reputation: 1537

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.

Upvotes: 2

randomizer
randomizer

Reputation: 1649

Conflicting code has nothing to do with combining JavaScript or put it in separate files but it requires descent programming.

To combine or not to combine depends on multiple things like:

  • file size
  • how many changes are you expecting.
  • How many relevant code has to be loaded at once that it is useful to put it in one file or separate files
  • one file keeps the number of file requests low
  • ..

Upvotes: 0

Related Questions