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
To ensure UglifyJs is active, type a command
uglifyjs --version, if successful, it will display the version of UglifyJs.
- 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/outputfilein this example, I run
uglify jquery-1.12.4.js --output jquery-1.12.4_min.js
The result is:
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.
--compress --manglefor 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:
The above image shows that the file sized is reduced more significant compared to the previous.
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
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
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.
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
shared.js files, the command we need to run is:
for %f in (*.js) do uglifyjs %f --compress --mangle --output %~nf.min.js
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:
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
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
To run it, simply double-click the
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.
Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!