How to merge multiple Javascripts into one Javascript

[Fakhry]

Hello friends, yesterday I was trying my hands on some of the JavaScript codes and ended with a doubt. from the time I started learning about JavaScript i heard very much about combining or embedding multiple JavaScript into one JavaScript but never successfully did it. I am really very much keen to combine 2 to 3 JavaScript codes into one always whenever I try to do it practically I failed to implement the theory I learnt. I always doubt the method that is mentioned in our notes, I have tried exactly the same method mentioned over there then too I failed to combine the codes. Now I have started doubting the method I have. Anyways I will give you the example, just help me out in combining them together into one file and then another thing is that I need them or I am going to make it as external. More few questions I would like to ask is:

• Is it possible to add any type of scripts together?
• Do we need to follow any common or general rule in order to combine those scripts? For example; remove the <script> tags from start and end of all and then give space between each block of code.
• And lastly I would like to ask is whether it is possible to use a JavaScript Compressors, if yes then what are the benefits and drawback of this thing?

[Faizah]

I would surely like to answer your last three questions respectively:

For the first question, yes you can surely add any number and any type of JavaScript combining them together into the same file if and only if you write them in a proper format and in the first place.

For the second one, I would say yes you remove the script tag but make sure that the order of the scripts is not changed. I mean to say that suppose if you are loading script1.js following script2.js then make sure that you put all of them in the same order into the new file without fail. By doing this the breakage of any dependency would be prevented.

And for the last one; yes you can surely use a JavaScript Commpressor without any issue. its advantage is that you can now load the script more faster. But there are also some other compressor like googles closure compiler that even runs optimization like caching DOM references that are used often onto your code that again allows for the faster execution and also remove or deletion of unreachable or unused codes. Disadvantages: you will encounter some extra testing with more and more aggressive compliers just to ensure that they do not break your code. Also there are certain coding practice that takes you to more advanced compression which can break other codes.

[AabheerM]

Very much thankful for the perfect answer and response, just another question I would like to ask is that suppose I have a script without a specific sequence, I am able to place any of the script above each other but when I will make one file out of all of them I should be putting them without any sequence. I mean while placing them it should be like I don’t even know about their sequence and I will be placing them randomly independent of the numbering. Just wanted to ask is it practically possible for me to do so and also I would like to ask whether I will have to add space after I paste or combine every script? The reason I am asking you about so much regarding combining the JavaScript is because I know combining the code always tends to be very much advantageous and also they are recommended almost everywhere but there are also other people who say that combining multiple scripts into one external file doesn’t makes much difference other than running bit faster that too with few milliseconds. If its true then why people recommend combining the code, few milliseconds obviously doesn’t really makes any difference. I am sure there must be more better reason for combining multiple codes together like memory storage saving and so on.

[Anahera]

Few millisecond faster is true my dear, if you are in sterile environment they surely you might only able to save few milliseconds per script and however its true with each and every round trip the clients makes to the server. On a very slow or old systems in an edge case over slow internet pulling down do nothing scripts and so on you can only save as much as a second or two second. Always remember that combine much resources as you can into as few files as possible is called nothing but "micro optimization". There are some people who feels that this micro optimization are for long web application like google maps or amazon sites where you can notice that each and every transaction between server and clients obviously influence the server load whereas for the slower and smaller sites its just waste of money and time. Now everything is on us whether we have to go for smaller ones or the bigger ones, what suits us the best.

[CADELARIA]

Very much thankful for the perfect answer and response, just another question I would like to ask is that suppose I have a script without a specific sequence, I am able to place any of the script above each other but when I will make one file out of all of them I should be putting them without any sequence. I mean while placing them it should be like I don’t even know about their sequence and I will be placing them randomly independent of the numbering. Just wanted to ask is it practically possible for me to do so and also I would like to ask whether I will have to add space after I paste or combine every script?

I would suggest you the same my friend, if you are not sure with the dependencies only then I guess you should better try to use the order as accordingly they are currently loaded into the document. Always remember if your code is properly typed or written then it would never require any kind of space or something in-between the script. And if you are not sure in any of the aspect then better you can end up having a line break code between the scripts.

Another thing to be noted is that you never try to use a compressor or a minifier or a compiler on your source code, instead use them only on your production code. I hope you are aware of both the codes and if not then that’s not an issue you need to just keep a copy of your code on your machine before compressing and only then load the compressed code on to the website.

[Shreevats]

If the scripts are perfectly written then the only dependencies that should be existing is on the library JavaScript that is available from the third party sources in most of the cases which highly increase the speed and download time where you can find a common copy that is used and already cached on the visitior’s computer machine like Jquery. Therefore these libraries should never be combined or mixed in a single file with any other Scripts. Also if you rewrite the JavaScript that is unremarkable is very much useful in both making the code easier to understand, reducing the conflicts than combining instead of combining them together into a single external file and also it becomes easier to maintain them. So therefore all the Scripts that is to be combined will have is going to be already rewritten in order to make them completely independent of any other thing other than ids on the page. Adding them together is nothing but just a simple way of placing and fixing all the code into one single file without even caring about the order of the scripts. Also combining the codes in that similar way proves to be useful only if they are almost used in the same pages if not in the same page than at least across the pages that your visitors are likely to visit together. If all the contents of the files is not required by any of the pages that the visitors visits the advantage and the gain from only downloading one file would be somehow lost. Once you are optimizing everything else combining scripts for you would be one of the very last thing left to your.

[Villiers]

You could surely save few milliseconds if you try to merge or combine all the data in the entire .js file. But remember if each and every document uses only a small part of the script then there is no such necessity of merging, combining data would be senseless and waste. Suppose of you have a .js file of 1.5 MB that has all the Scripts contained in it and if the file contains the following three lines of code:

function sortCriteria(){
return (a<b?1:b<a?-1:0);
}

Now just let me know whether there is any special of proper reason for loading up the whole 1.5MB file for it. It only recommended to combine the files only if they contains related data like if one function completely depends upon another function, definitely it would be very much senseless to keep both the function saved in two different and separate files. But suppose if you have a script say a banner rotate script and another gallery script which have no common constant functions or anything like that then better you keep then saved in separate files and don’t try to combine together. The same thing is applied for graphics i.e. the sprite images. You could have some huge amount of buttons which is dispersed over the entire site with some 3 or 4 states which gives you the total of 600-800 sprites. If each page use 12 sprites then you will surely have to waste your lot of bandwidth and download time. and if the user keeps on visiting so many pages where during the session majority of the sprites is used then better you combine them; I can only recommend you this and if there is a site where he user visit 1 or 2 pages mostly using some of the sprites then the sprite should be better splitted up over multiple files.

[ADELARIA]

I have nowhere seen that combining the script makes anything simpler or easier to access the content or something of the same while working on the project with the pages that access certain scripts. If asked me I would have simply considered separating them with comments and giving the parts titles as most of the other programmers do. Just let me do you really need to reference lot of scripts in a page header. Even for me scripts are quite complicated but then too I always love to give my contribution in such things.

[Menominee]

I have nowhere seen that combining the script makes anything simpler or easier to access the content or something of the same while working on the project with the pages that access certain scripts. If asked me I would have simply considered separating them with comments and giving the parts titles as most of the other programmers do. Just let me do you really need to reference lot of scripts in a page header. Even for me scripts are quite complicated but then too I always love to give my contribution in such things.

[JustineBB]

Unless and until you are a Java expert you can’t be think of getting any possible advantage which you can possibly gain by combining scripts together, rather you can get beefiness that are hundred times better and larger by making other changes. I am sure that even for me I have a huge way to go before and changes provide any kind of benefits to the scripts that is written even if the codes and the scripts that I write are much clear than those I use to write during the earlier time. Always remember until and unless the code is very much close to perfect you can find lot of huge benefits that you can actually achieve by just adjusting the code itself towards perfection than achieving by combining files together.