What does uglify mean in Javascript?

Uglify, as it names suggest’s is used to uglify the javascript ie, remove white spaces, change big variable names to small ones and compress the file hence reducing the size of the file and helping with performance.

The Pros:

1. Helps in performance - So when an HTTP request goes for fetching the file, the server responds by sending the code back in a stream. If the size of the file is huge, the server will take more time to send back the file and hence compressing it and ‘uglifying it’ can help reduce this time. In addition to this removing unnecessary spaces and tab’s and the beautiful comments can help increase the speed of interpretation needed on the browser end.

Con’s:

1. Reduces Readability — So basically minifying your code will reduce the readability of your code and will be hard to debug. Hence only ‘uglify’ when you need to push to production.

How do we improve performance and make sure I can read the code and debug?

Luckily we have workflow tools like gulp/grunt and webpack which would automatically ‘uglify’ your file when you build it for production. Hence when you want to debug on your local machine you would not see it ‘uglified’. In addition, if you want to remove the ‘uglification’ in production you can just remove that task (which is a few lines) and debug!

Some links for workflow tools:

GULP: Concatenate & Minify Javascript with Gulp, Improve Site Performance

GRUNT: https://www.dyclassroom.com/grun...

Webpack: UglifyjsWebpackPlugin

In addition, if you want to do it manually (every time uglify and save it to the js file before pushing it to production) use these links:

UglifyJS 3: Online JavaScript minifier

Uglify and Prettify JS — Online

FYI: There are some third-party libraries and google libraries to do this as well!