How to Compress Javascript File Using UglifyJs

Previously we’ve discussed how to compress javascript file using the Yahoo’s YUICompressor and Google’s Closure Compiler, today we’ll discuss how to compress javascript file using UglifyJs.

UglifyJS itself is written using javascript, till this day, it still actively developed and has reached version 2, where a lot of useful features were added.

This Compressor is probably the best one as it safe and  in some situation had better compression result compared to the others.

I. Installing NPM

To be able to use UglifyJs, we need to install NPM (Node.js Package Manager). The easiest way is to install Nodejs. Go to Node.js Home Page then download the installer file.

The downloaded file automatically adjusted to our operating system, whether 32 or 64 bit. Once downloaded, run the installer and simply follow the installation wizard.

After the installation process is completed, test whether NPM is active, open a command prompt and run a command: npm --version if successful it will display the version of NPM.

II. Installing UglifyJS

The next step is installing UglifyJs, simply run npm istall uglifyjs -g command, this command will install the last version of UglifyJs with all the dependencies.

Note that in order to be able to run UglifyJs from the command prompt, we have to add a parameter of -g.

Install UglifyJs Using NPM

To ensure UglifyJs is active, type a command uglifyjs --version, if successful, it will display the version of UglifyJs.

III. Compress Javascript File Using UglifyJs

Now, we’ll compress javascript file using uglifyjs, for easiness, do the following steps:

  1. Create a working directory, for example, I’ll create a folder named uglifyjs on E drive, then, copy the javascript file that we want to compress into the directory, in this time I use jquery-1.12.4.js file.
  2. Open a command prompt and move the cursor to the directory, then run a command using a format: uglifyjs path/to/sourcefile --output path/to/outputfile in this example, I run uglify jquery-1.12.4.js --output jquery-1.12.4_min.js

    Compress Javascript File Using UglifyJs Command

    The result is:

    Compress Javascript FIle Using UglifyJs - Default Options

    The figure above shows that the file size is reduced significantly, almost half of the original. BUT using the default options, UglifyJS only remove comment, space, enter, and other characters that are not needed.

  3. Use --compress --mangle for maximum compression results. These options will change the name of a variable, property, etc. into one letter and remove the unused functions and variables, thus the compressed file was more compact.

    So let’s try these options:

    uglifyjs jquery-1.12.4.js --compress --mangle --output jquery-1.12.4_min.js

    The result is:

    Compress Javascript File Using Mangle Option

    The above image shows that the file sized is reduced more significant compared to the previous.

More Options

Note that --compress and --mangle have more specific options, the --compressor options can be found on Compressor-options page, while the --mangle options on Mangler-options page.

By default UglifyJs will remove variables and functions that are not used in the entire code based on its scope, eg function scope. If you want to keep them, you need to add unused=false option to the --compressor option.

UglifyJs will also combine variables beginning with var keyword into -for-example-: var n, t, r, l, in order to prevent this behavior, set the hoist_vars option to true, while for functions, set the hoist_func option to true.

For example:

uglifyjs shared.js --compress hoist_vars=true,unused=false --mangle --output shared.min.js

To directly try the other options, go to http://lisperator.net/uglifyjs/ then click the “Open Demo” button.

IV. Compress Multiple Javascript Files Using UglifyJs

In some situation, sometimes we want to compress multiple files at once (without combining them), to do so, we can not directly use the UglifyJs command, otherwise, use the default Windows command.

Suppose we want to compress data.js, main.js, and shared.js files, the command we need to run is:

for %f in (*.js) do uglifyjs %f --compress --mangle --output %~nf.min.js

The command will search all the javascript files (files with a .js extension) within E:\uglifyjs directory, then compresses each file using UglifyJS.

If you want to apply it only for specific files, you can use the following command:

for %f in (data.js main.js) do uglifyjs %f --compress --mangle --output %~nf.min.js

The result is:

Compress Multiple Javascript Files Using UglifyJs

V. Combine and Compress Multiple Javascript Files Using UglifyJs

Continuing the previous example, now we’ll combine the javascript files then compress it afterward, fortunately, we can accomplish this task using uglifyjs’s command.

The command is:

uglifyjs data.js main.js shared.js --compress --mangle --output merged.min.js

Note: UglifyJs will automatically correct errors that may occur while merging the files, for example, a semicolon will automatically be added to the end of the first file (data.js) as it not ended by a semicolon.

VI. Automate The Process

If we compress the javascript file repeatedly, consider to make it automatic, so we don’t need to open and run a command again and again, that save our time alot.

The do so, we need to create a .bat file. Open a text editor such as Notepad and type a command we want to run, for example: uglifyjs data.js main.js shared.js --compress --mangle --output merged.min.js, then save it with .bat extension e.g mergeall.bat.

Note: place this file to the same directory with the javascript file we want to compress.

To run it, simply double-click the .bat file.

Automatically Compress Javascript File Using UglifyJs

Furthermore

You can play with the options to try different compression result. To see all the available options, run a command of uglifyjs-help or visit the NPM – UglifyJs page.

In Addition, you can visit the author page at Github to see the latest version of UglifyJs.

Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Related Post

Leave a comment

Like Us

Newsletter

Great information from webdevzoom.com right to your inbox

We value your privacy

Social