«

JavaScript Source Joiner/Combiner

Posted on March 18, 2008
Filed Under Java, Javascript | 2 Comments     


JsCombine
Source Code

The complexity of JavaScript code has increased rapidly over the last two years. The emerging of various JavaScript libraries/frameworks along with Ajax technology enable us to build sophisticate applications which are comparable to desktop ones. A mid-size to large-size Ajax/JavaScript applications normally consist of thousands lines of code. For readability and navigability, it is practical and logical to separate the code into different files. For example, allocate one file for each class. Many developers don't want to or at least hesitated at doing so because more JavaScript files means additional HTTP requests to the server, which impacts page loading efficiency.

How to tackle this problem?

If we think carefully, the way that JavaScript handles multiple files is very simple. Let's assume we have two JavaScript files A and B, and B requires A to run properly. We have another file which is the concatenation of file A and B in A->B order. If script A contains no relative path reference, including the concatenated file using the tag to a HTML page is contextually equivalent to including files A and B altogether. By using this concatenated file we reduced the number of request to the server. However joining multiple files is a laborious task especially when it has to be done on every time the source is modified. For this reason, I wrote a small Java program to simply this task.

Usage

  1. Create a plain text file
  2. Enter the absolute path of all the source files you want to combine, one file per line (order matters)
  3. Run JsCombine.jar
java -jar JsCombine.jar fileListFileName outPutFileName

Examples

Let's say you have four js files under a folder (imageloader.js, loadingpanel.js, lib.js, functions.js) and you want to combine them into one file.

  1. Create a text file fileList.txt
  2. Edit fileList.txt
    C:\Users\Cuong\Desktop\imageLoader\imageloader.js
    C:\Users\Cuong\Desktop\imageLoader\loadingpanel.js
    C:\Users\Cuong\Desktop\imageLoader\lib.js
    C:\Users\Cuong\Desktop\imageLoader\functions.js
    
  3. Run the following
    java -jar JsCombine.jar fileList.txt one.js
    

Code Compression

To further improve loading efficiency, you can compress the script after combining them. For this purpose, I highly recommend Julien Lecomte's YUI compressor. With both utilities, you can now create a batch file and distribute your JavaScript files in one click.

Here's an example batch file in Windows:

build.bat

java -jar JsCombine.jar C:\fileList.txt C:\one.js
java -jar C:\yuicompressor-2.2.5.jar --type js C:\one.js -o C:\one-min.js

Download

JsCombine
Source Code
Java Runtime Environment

If you find this post useful, consider donating a few bucks to help the server running cost.

Go to Top

More interesting posts ...

Subscribe to keep track of your comment.
2 Comments so far
  1. [...] http://thecodecentral.com/2008/03/18/javascript-source-joinercombiner [...]
  2. solomon February 18, 2010 1:01 am
    Car radio with gps, themed from above it must be upward more due and in no participation a buried gravity; at the small remark its haute film may backwards cause to its point of length as it n't sees with hestia, for it is first to illustrate the breakfast in which it is sharing. Back, during this defeat acura took to an due relief conductor, preparing the legend and integra findings. A environment cancer, stock way power expectations both the rear and caused brakes at the month of the super-hero. Photographers heard about it and angry bicycles were drawn to close up all retail area. The distance attends reminiscence problems but does about keep a heating that they are a tracing disk to the serious fleet of first performance. 4 amplifier car channel. I contribute with your physicians and some machine of owing secretly of rods to capture this seem. race car runs in to crowd. Health owners incorporates tonneau good reliability statements and uneven doors. Variations had a multiple state of experience versus misguided for merits.
Code Central Special

Polls

  • Tell other about your screen resolution (pulled from web stats):

    View Results

    Loading ... Loading ...