Minified files aren't meant to be pretty, hence the name "Uglify", although they do provide significant savings and therefore, happy website visitors. In most cases, implementing additional techniques on top of the default minification is beneficial as it helps further reduce file sizes. For example, if you'd like to enable sequences, conditionals, and booleans you can do so with the following: uglifyjs jquery-3.2.1.js -compress sequences=true,conditionals=true,booleans=true -mangle -output jquery-3.2.1.min.js The new Jquery file is now only 87 KB as opposed to 136 KB.ĭepending on your personal preference, amount of size savings you want to achieve, and the way your JS file is structured, you may want to define other directives within your commands. With -mangle defined, this further reduces the size of the Jquery file even more. The CLI command used in this case looks like: uglifyjs jquery-3.2.1.js -compress -mangle -output jquery-3.2.1.min.js Now, let's run another test, this time with mangle enabled. The original file started at 268 KB in size and after being run through UglifyJS is now just 136 KB in size. Already, the size savings are quite good. These are UglifyJs's default settings and basically defines what the input file is and what the output file should be called. The CLI command we'll use for starters is the following: uglifyjs jquery-3.2.1.js -output jquery-3.2.1.min.js For this example, we'll use a copy of Jquery-3.2.1.js. With UglifyJS installed and a JavaScript file ready, let's see how much we save in terms of file size. To help demonstrate the effectiveness of using a minifier on a JavaScript file, we'll go over a couple of examples using the CLI. Therefore, files are smaller due to fewer characters being used. into one letter and remove the unused functions and variables. This will change the name of a variable, property, etc. Things like dead_code to remove unreachable code, sequences to join consecutive simple statements using the comma operator, or join_vars to join consecutive var statements.įurthermore, another useful feature to enable is Mangle. To further minify your JS files, it's recommended to implement at least some of the options mentioned in the links above. Using -compress alone will result in a certain level of size savings, however, using only this option will not the provide the savings you could be achieving. If you'll be using the API and need a quick reference to each features list of options, check the following links: The API reference on GitHub outlines a list of options available and also include structure examples. There are myriad of usage options available in UglifyJS. To use UglifyJS for programmatic use: npm install uglify-js To use UglifyJS as a command line app: npm install uglify-js -g There are two slightly different commands which can be used to install UglifyJS depending on your use case. Therefore, you'll need to make sure you have the latest version of Node.js installed. You'll find two repos for UglifyJS on GitHub however, you should reference the most recent one located here. Installing UglifyJSĪs of writing this article, UglifyJS is now in its third version. There are a few different aspects of a website which can be minified including HTML, CSS, and JS, although UglifyJS focusses solely on minifying JavaScript.Īpart from minification, UglifyJS also contains a few other tools that help automate working with JS including:įor the scope of this article, we'll cover how UglifyJS's minification/compression features works and what options available to users. Minification is a valuable performance enhancing technique as it removes whitespace and unnecessary characters within a file to make it smaller and thus, load faster. UglifyJS is best known as a JavaScript minifier.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |