![]() ![]() When applied to file management, concatting means combining multiple files into one file. This allows, for example, many javascript files to be combined into one JS file for distribution. This reduces the number of requests a web browser must make, and thus (usually) speeds up the data transaction from the web server. ![]() Uglification - In order to say bytes of information, javascript can be not only minified but have variable and function names changed to smaller names. For example, a variable named “LeftMarginSpace” will be automatically changed the “a” and all such instances when compiled. ![]() Using tricks like this, javascript can shave even more space, and the reductions can be significant on larger scripts. Sourcemaps - Modern browsers support additional CSS files called source maps, files that list where CSS rules are written, and only applicable when using inspect element. Javascript minification is a technique which condenses your script into a much smaller footprint.In Sass/Less projects, typically developers divide their CSS code into many files and compile one big minified file. You lose human readability but you conserve considerable bandwidth – in the end, Javascript is meant for your browser not for your users. Most production websites use Javascript minification but the way this is achieved varies greatly. From simple online converters to more comprehensive GUI tools to command line interfaces, our options are pretty varied. Recommended Reading: Useful Chrome DevTools Tips For Developers How Minification Works In this article we’ll take a look at how Javascript minification works, how we can build it into our workflow and what the pros and cons of minifying are. The best way to learn what happens when you minify your code is to take a look at the UglifyJS Github Repository. Here are some of the transformations it applies to make your code shorter: This script is used in many online converters as well as GUI tools and command line tools like Grunt. Shortens variable names, usually to single characters.Converts arrays to objects where possibleĪs a quick example, here’s a function that essentially writes some given text out.Let’s see what happens when we minify this. function hello(e)hello("Welcome to the article") Javascript Minification Tools Note the removal of spaces and indentation and the shortening of the text variable. The tools used for minifying Javascript can be broadly categorized into 3 groups: online tools, GUI tools and command line tools. With online tools it is usually a matter of pasting your code and copying the result immediately.GUI tools often contain a lot more functionality JS minification is just a small part of what they do.Command line tools are also usually more comprehensive, offering minification as a module.Online YUI Compressor is a more powerful tool which uses the YUI compressor, with lots of options and CSS minification capabilities as well. ![]()
0 Comments
Leave a Reply. |