Combining javascript files.

[Barely Audible]

I have three seperate javascript files referenced on some pages - is it
possible to combine them all into one file ?

What shoulld I be aware of when doing this?

--
TTFN
Jim

"Leave the Artillerymen alone, they are an obstinate lot. . ."
-- Napoleon Bonaparte

 

[Jonas Raoni Soares Silva]

I have three seperate javascript files referenced on some pages - is it
possible to combine them all into one file ?
Sure

What shoulld I be aware of when doing this?

Mainly variables (functions are also variables) with the same name,
but different meanings. So avoid using global variables, try to insert
your things into a "namespace".

Despite this, take care with functions that change the behaviour of
JavaScript basic features and any other unexpected stuffs

 

[Henry]

I have three seperate javascript files referenced on some
pages - is it possible to combine them all into one file ?

Certainly possible. Effective is another matter.

What shoulld I be aware of when doing this?

If you reference these three JS files from 3 sequential SCRIPT
elements, and you assemble the three files into one in the same order
and then replace the 3 sequential SCRIPT elements with one that
references the new file then the outcome should be identical.

On the other hand, if the SCRIPT elements that impart the existing
files are spread out across a document then many other factors may
come into play. Far too many to be simply listed.

 

[Barely Audible]

Thanks Jonas & Henry - I'm going to give it a try!

 

[dhtml]

Certainly possible. Effective is another matter.

TO be determined effective, there would have to be a goal stated.

I use ANT to combine scripts at work. I set it up so that I could have
many small files without having to hit the user with too many script
tags, and to allow minifying the combined files.

There are levels of scope for the scripts.

1. application
2. page

Things that are small and simple are easier to maintain and test than
things that are large and complex. Small files is good for development
sanity/code clarity.

Script files are downloaded one at a time. This adversely affects page
load performance.

When the browser encounters a <script> tag while parsing an HTML
document, the script must be downloaded and run before the HTML can
continue rendering.

Combining multiple scripts and css files into one js or css file reduces
the number HTTP requests (2 synchronous per domain) and prevents blocking.

Minified files are significantly smaller (a 24k file may compress to
about 6k).

By reducing the size of cacheable items, they will take less space in
the cache. This will help to increase chances of a user having a primed
cache (scripts that exist in the cache do not need to be downloaded).
So, not only do the minified files download quicker, they are more
likely to stay in the returning user's cache.

Files are build from src -> build -> deploy

Files are combined in the /build directory using the ANT <concat> task.
These concat'd files, by convention, end in "-all.js" (or "-all.css").

Only files ending in -all.js are minified. This is done so that pages
which desire to use more js can combine and then minify that JS. Minfication

Minfication is done using yuicompressor in an ANT <apply> task. The arg
lines can control the level of minification. See
http://www.julienlecomte.net/yuicompressor/README for details.

Since minified files are nearly impossible to debug, we have a request
param nomin. Setting this flag will result in a non-minified version of
the file that was created in the ANT task js_css_build.

Garrett

 

[Thomas 'PointedEars' Lahn]

Certainly possible. Effective is another matter.

You mean _efficient_ instead, and a correct answer
to the corresponding question is "probably yes".


PointedEars

 

[Bart Lateur]

Mainly variables (functions are also variables) with the same name,
but different meanings. So avoid using global variables, try to insert
your things into a "namespace".

Duh! That's exactly the same when they're 3 files instead of 1.