Combining multiple external .js files into one?

This is probably a simple question, but I couldn't find an exact answer...

Say you are calling 3 separate external .js files (like date.js, script.js, mail.js) using 3 separate lines in your header.

Could I just put all the external files' contents into a master.js file and call that on each page? It would be much easier than adding in new references in the header for every single page...

Thanks

 

Yes, copying the entirety of each script into one larger script will work fine.

 

Hi,

Are yousure you want to do it ? See my post at http://forums.digitalpoint.com/showthread.php?t=413889. I have tried to explain why it can be a bad idea.

Regards,

Samyak

 

You could be using the following for master.js

function include(script_filename) {
    document.write('<' + 'script');
    document.write(' language="javascript"');
    document.write(' type="text/javascript"');
    document.write(' src="' + script_filename + '">');
    document.write('</' + 'script' + '>');
}

include('file1.js');
include('file2.js');
include('file3.js');

Code (markup):

I think that will work, if not let us know

 

i already try what you suggest can you explain more?
when i try it that make more http request. so can you explain furthur?

 

Making it a single file is less handshakes, and therein likely a better solution. Anyone telling you otherwise doesn't know enough to be opening their mouths on the subject.

... and @DeViAnThans3, throwing more code at it, PARTICULARLY idiocy like document.write to build a script tag, is NOT the answer. As a rule of thumb, throwing more code at it is NEVER the answer! Even if it was, multiple document.write statements is fine if you're writing scripting in 1999 for Nyetscape 4 -- it has no place in modern scripting as the proper approach is to build using the DOM... also the language attribute is deprecated -- I get a laugh every time I see someone using 1998 style code.

IF you were to have a function to do that, it should go like this:

function include(scriptFileName) {
	var scriptTag = document.createElement('script');
	scriptTag.type = 'text/javascript';
	scriptTag.src = scriptFileName;
	document.body.appendChild(scriptTag);
}

Code (markup):

NOT that said function is even close to the correct answer to the OP's question -- though it would be useful when you conditionally are loading scripts. (I conditionally load script specific CSS that way).

The OP's question makes perfect sense -- combine them down to a single file so there's only one handshake.

@samyak_bhuta -- your answer also has NOTHING to do with the question here, as it's not if it's an internal or an external, he's asking the difference between multiple external files and ONE external file. Inline vs. external doesn't even play into it (though inline does get down on it's knees in front of the proverbial equine).

 

so you mean like this.

they want to make date,js script.js and make.js to be 1 file as master.js so


function include(scriptFileName) { var scriptTag = document.createElement('script'); scriptTag.type = 'text/javascript'; scriptTag.src = date.js;
scriptTag.src = make.js;
scriptTag.src = script.js; document.body.appendChild(scriptTag); }then name as master.js ? like this?
if not please share your knowledge

 

NO, that's not what they mean -- they mean make it ONE FILE... NOT one include. What you are thinking does NOTHING to make it a single FILE.

As in copy/paste them all into a single conglomerated file -- NOT writing a loader that just loads three separate files -- that makes no progress as then you've just added MORE CODE and another file.

Open up a new master.js in an editor, open up all three separate smaller files, go to the first file, ^A (select all), ^C (copy), alt-tab to master.js, ^V (paste), alt-tab to second file, ^A (select all), ^C (copy), alt-tab to master.js, ^End (end of file), ^V (paste), alt-tab to third file, ^A (select all), ^C (copy), alt-tab to master.js, ^End (end of file), ^V (paste), ^S (save master.js)... then include just the one file... allowing you to delete the original three separate files.

Or from the dos command line / windows shell:
copy/b date.js+script.js+make.js master.js

Or from a *nix SH type shell:
cat date.js script.js make.js > master.js

Doing it from the command line is a much faster/easier approach.

That way only one file is actually loaded. What you are suggesting just adds a fourth file and therein a fourth handshake! It's MORE FILES, the antithesis of what the OP is asking for, as those three separate subfiles are STILL loaded separately.

I'm thinking you aren't grasping what we mean by a handshake. Every time a separate file is requested from the server, it takes a certain amount of time -- usually two to three times your 'ping' time to the server, often longer if you have a lot of cookies or browser specific instructions. The real world 'average' is around 300ms, though it can range anywhere from 60ms to a whopping 2 seconds per file. Because browsers can request multiple files at once it's generally accepted the first 8 are free, and some of the 'overlap' reduces it as well... to account for this a good estimate for 'first load' is 200ms for each file past the first 8 as a lowball figure, and 1 second for each file past the first 8 as a really poor connection (dialup, cheap cable), one that's choked out for connection limits (public Internet at a busy coffee shop, running next to a bittorrent client, home wireless where mommy, hubby and 2.5 kids are all doing different things ), or a mobile connection. The more cookies you have set, the longer that request for a file can take as generally cookies are sent along with requests. (which is where the idea of hosting static files on a subdomain or separate domain -- even if on the same server -- comes into play)

Because of that if you have say... 24 separate files (images+scripts+objects+frames) on your page (regardless of how you load them) that's anywhere from 1.6 seconds to 16 seconds (or more with lots of cookies) overhead the first time someone visits your page! (and it's even WORSE if https is involved). I've seen sites that people say are 'fine' that here take more than 30 seconds firstload and 15-20 seconds on sub-page loads because the dumbass who wrote it used hundreds of separate files that are so big, that by the time you've loaded four or five pages on the site the cache begins to flush itself.

You can see the same phenomenon exaggerated to the max via FTP, where thirty separate 10k files takes far longer to transfer than a single 300k file... handshaking and connection overhead.

It's also why my 'ideal' target for a empty theme template for a site is 72k in 16 files, and the upper limit I'd allow for a populated page (with exceptions for things like image or video galleries) being twice that... Which of course is why asshattery like jquery doesn't even fit my pages, since by itself compressed it's what I'd have in my template for code+scripts+images+css!

P.S. Your modification of the code I posted is completely broken gibberish as date.js, make.js and script.js aren't even variables, and sending them to the same SRC means only the last one would be loaded.

 

so how if i compress first then copy them like you said. it's will oke?
just copy them on master.js or need put 1 space between them?

 

I would add together the uncompressed versions, make sure where they were joined together stuff that can't work on single lines isn't, then compress.

Though to be frank, I consider whitespace compression and script compression when mod-deflate is available to most of your visitors to simply be a way to cover up inept coding or to try and justify an overuse of javascript on a website... or are wasting time on multiple idiotic bloated scripting 'frameworks' like jQuery or Mootools.

Really if you have enough scripting for it to matter (anything more than ~24k or so) and you're not building a full on application like google maps -- it's very likely you're knee deep in "javascript for NOTHING" territory and driving away more users than you're attracting.

The "free directory" link in your signature being a perfect example of that with it's use of three separate libraries... and for what? I'm not even seeing anything there that warrants the presence of scripts! But then there's a reason I browse with scripting off by default, only enabling it on a site-by-site basis.

Goes hand in hand with the IE conditionals to cover up sloppy layout practices, non-semantic markup, endless scripting for no reason inlined in the markup, and complete failure to even practice the most simple of accessibility concepts on said site.

 

yea. from first my javascript libs too many. i think i have 18 external javascript. so that make my site slowing. i will trying to compress first then put them together on 1 costum.js

 

According to the "web developer" extension for FF (information -> document size -- handy tool), it's 15 scripts totalling 112k compressed, 413k uncompressed.... the total site being 48 files spanning 270k compressed, 602k uncompressed.

The 29 separate images on a page that by my count only uses a half dozen content images is also 'bad'. 148k of images in 29 files for THAT is bad... though so is the 23k of markup when you only have 1.6k of plaintext and a half dozen content images. No real reason that entire site UNCOMPRESSED couldn't be brought in well under 80k in half the file count apart from code bloat, lack of CSS image recombination, javascript for nothing, lack of proper image compression and/or formats (the 28k contentwrapperbg.gif for example should probably be a 7k PNG), etc, etc.

 

i really love to talk with you . i will try my best shot since i still newbie about all this.
honestly this is my first time met with people willing to share his knowledge, like you.
maybe i will invite you talk from ym or google messenger of course if you wish for it.^^.

 

i already make Png type image. it's 37k for that.

 

Let's take this to PM rather than hijacking MTbiker's thread. (though you probably saved it as 24 or 32 bit).

 

Was that a typo? A .js file is text, so I'd tell it /a, so as to end at any EOF. And I'd specify the destination.

 

If it's /a is 7 bit ascii -- if you use extended characters or UTF8, the /a option will mangle the file the same way text transfers via FTP do. It can also parse out/replace CR/LF combinations in a undesired manner.

Good rule of thumb is to just always do binary copies, as then there is ZERO chance of it screwing things up. Honestly I never understood the point of /a apart from intentionally WANTING it to screw up. Much less the whole 'end delimiter' thing is grossly inefficient from an assembly language point of view -- it's always faster if you know how many to do than it is to look for a specific value, unless the processor sets that value when the register is loaded (like on early 8 bit motorola and pre 1990's big iron mainframes)

 

If the TS used google or another searching engine he'll find alot of tools to do it for you!

http://demo.lateralcode.com/jmerge/ is one example, and its working GREAT!

I've made my own little PHP script for merging javascript into one, with headers to ensure that the latest version is loaded!

example of another script doing the same is.

http://www.electrictoolbox.com/combine-minify-javascript-php/