Minification (programming)

Last updated

Minification (also minimisation or minimization) is the process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute. Minification reduces the size of the source code, making its transmission over a network (e.g. the Internet) more efficient. In programmer culture, aiming at extremely minified source code is the purpose of recreational code golf competitions.

Contents

Minification can be distinguished from the more general concept of data compression in that the minified source can be interpreted immediately without the need for a decompression step: the same interpreter can work with both the original as well as with the minified source.

The goals of minification are not the same as the goals of obfuscation; the former is often intended to be reversed using a pretty-printer [ citation needed ] or unminifier. However, to achieve its goals, minification sometimes uses techniques also used by obfuscation; for example, shortening variable names and refactoring the source code. When minification uses such techniques, the pretty-printer or unminifier can only fully reverse the minification process if it is supplied details of the transformations done by such techniques. If not supplied those details, the reversed source code will contain different variable names and control flow, even though it will have the same functionality as the original source code.

Example

For example, the JavaScript code

// This is a comment that will be removed by the minifiervararray=[];for(vari=0;i<20;i++){array[i]=i;}

is equivalent to but longer than

for(vara=[],i=0;i<20;a[i]=i++);

History

In 2001 Douglas Crockford introduced JSMin, [1] which removed comments and whitespace from JavaScript code. [2] It was followed by YUI Compressor in 2007. [2] In 2009, Google opened up its Closure toolkit, including Closure Compiler which contained a source mapping feature together with a Firefox extension called Closure Inspector. [3] In 2010, Mihai Bazon introduced UglifyJS, which was superseded by UglifyJS2 in 2012; the rewrite was to allow for source map support. [4] From 2017, Alex Lam took over maintenance and development of UglifyJS2, replacing it with UglifyJS3 which unified the CLI with the API. [5] In 2018, Terser has been forked from uglify-es [6] [7] and has gained momentum since; in 2020 it outstripped UglifyJS when measured in daily downloads. [8]

Source mapping

A Source Map is a file format that allows software tools for JavaScript to display different code to a user than the code actually executed by the computer. For example, to aid in debugging of minified code, by "mapping" this code to the original unminified source code instead.

The original format was created by Joseph Schorr as part of the Closure Inspector minification project. [9] Version 2 and 3 of the format reduced the size of the map files considerably. [9]

Types

Tools

Visual Studio Code comes with minification support for several languages. It can readily browse the Visual Studio Marketplace to download and install additional minifiers.

JavaScript optimizers can minify and generate source maps. In addition certain online tools can compress CSS files. [10]

Web development

Components and libraries for Web applications and websites have been developed to optimize file requests and reduce page load times by shrinking the size of various files.

JavaScript and Cascading Style Sheet (CSS) resources may be minified, preserving their behavior while considerably reducing their file size. Libraries available online are capable of minification and optimization to varying degrees. Some libraries also merge multiple script files into a single file for client download. JavaScript source maps can make code readable and debuggable even after it has been combined and minified. [11]

Related Research Articles

<span class="mw-page-title-main">JavaScript</span> High-level programming language

JavaScript, often abbreviated as JS, is a programming language and core technology of the Web, alongside HTML and CSS. 99% of websites use JavaScript on the client side for webpage behavior.

<span class="mw-page-title-main">Google Web Toolkit</span> Free Java library

Google Web Toolkit, or GWT Web Toolkit, is an open-source set of tools that allows web developers to create and maintain JavaScript front-end applications in Java. It is licensed under Apache License 2.0.

<span class="mw-page-title-main">Douglas Crockford</span> American computer programmer

Douglas Crockford is an American computer programmer who is involved in the development of the JavaScript language. He specified the data format JSON, and has developed various JavaScript related tools such as the static code analyzer JSLint and minifier JSMin. He wrote the book JavaScript: The Good Parts, published in 2008, followed by How JavaScript Works in 2018. He was a senior JavaScript architect at PayPal until 2019, and is also a writer and speaker on JavaScript, JSON, and related web technologies.

<span class="mw-page-title-main">Firebug (software)</span> Web development add-on for Firefox

Firebug is a discontinued free and open-source web browser extension for Mozilla Firefox that facilitated the live debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript.

<span class="mw-page-title-main">Etherpad</span> Open-source web-based collaborative real-time editor

Etherpad is an open-source, web-based collaborative real-time editor, allowing authors to simultaneously edit a text document, and see all of the participants' edits in real-time, with the ability to display each author's text in their own color. There is also a chat box in the sidebar to allow meta communication.

<span class="mw-page-title-main">Google Closure Tools</span> JavaScript developer toolkit

Google Closure Tools is a set of tools to help developers build rich web applications with JavaScript. It was developed by Google for use in their web applications such as Gmail, Google Docs and Google Maps. As of 2023, the project had over 230K LOCs not counting the embedded Mozilla Rhino compiler.

<span class="mw-page-title-main">Node.js</span> JavaScript runtime environment

Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser.

Web performance refers to the speed in which web pages are downloaded and displayed on the user's web browser. Web performance optimization (WPO), or website optimization is the field of knowledge about increasing web performance.

<span class="mw-page-title-main">Sencha Touch</span> JavaScript framework

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

npm JavaScript package manager

npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js and is included as a recommended feature in the Node.js installer.

Dart is a programming language designed by Lars Bak and Kasper Lund and developed by Google. It can be used to develop web and mobile apps as well as server and desktop applications.

<span class="mw-page-title-main">Brackets (text editor)</span> Editor for web development

Brackets is a source code editor with a primary focus on web development. Created by Adobe Inc., it is free and open-source software licensed under the MIT License, and is currently maintained on GitHub by open-source developers. It is written in JavaScript, HTML and CSS. Brackets is cross-platform, available for macOS, Windows, and most Linux distributions. The main purpose of Brackets is its live HTML, CSS and JavaScript editing functionality.

Pretty Diff is a language-aware data comparison utility implemented in TypeScript. The online utility is capable of source code prettification, minification, and comparison of two pieces of input text. It operates by removing code comments from supported languages and then performs a pretty-print operation prior to executing the diff algorithm. An abbreviated list of unit tests is provided. The documentation claims the JavaScript pretty-print operation conforms to the requirements of JSLint.

Yeoman is an open source client-side scaffolding tool for web applications. Yeoman runs as a command-line interface written for Node.js and combines several functions into one place, such as generating a starter template, managing dependencies, running unit tests, providing a local development server, and optimizing production code for deployment.

asm.js is a subset of JavaScript designed to allow computer software written in languages such as C to be run as web applications while maintaining performance characteristics considerably better than standard JavaScript, which is the typical language used for such applications.

<span class="mw-page-title-main">Webpack</span> Open-source JavaScript module bundler

Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules.

gulp is an open-source JavaScript toolkit, used as a streaming build system in front-end web development.

This is a list of articles related to the JavaScript programming language.

JSDelivr is a public content delivery network (CDN) for open-source software projects, including packages hosted on GitHub, npm, and WordPress.org. JSDelivr was created by developer Dmitriy Akulov.

Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can be used to style each element by mixing and matching.

References

  1. ↑ Crockford, Douglas (11 September 2001). "JSMin: The JavaScript Minifier". Crockford.com. Self-published. Archived from the original on 5 April 2002.
  2. 1 2 "Code minification". webplatform.github.io. The WebPlatform Project. Archived from the original on 24 April 2016.
  3. ↑ Paul, Ryan (6 November 2009). "Google opens up its JavaScript development toolbox to all". Ars Technica .
  4. ↑ Bazon, Mihai (8 November 2012). "Should you switch to UglifyJS2?". lisperator.net. Self-published.
  5. ↑ "uglify-js NPM". npmjs.com. 6 May 2017.
  6. ↑ "terser · JavaScript mangler and compressor toolkit for ES6+". terser.org. Retrieved 29 January 2023.
  7. ↑ https://github.com//terser/commit/3ef6879ecafd12b57e575ec85e6104e71d5a1b6f [ bare URL ][ dead link ]
  8. ↑ "Terser vs uglify-js". NPM trends. Archived from the original on 27 January 2024.
  9. 1 2 "Source Map Revision 3 Proposal". 11 January 2011. Archived from the original on 26 November 2014. Retrieved 16 April 2016.
  10. ↑ Megida, Dillion (18 May 2022). "Minify CSS – CSS Minifying and Compression Explained". Free Code Camp. Retrieved 29 March 2024.
  11. ↑ Seddon, Ryan (21 March 2012). "Introduction to JavaScript Source Maps". HTML5 Rocks. Archived from the original on 28 December 2021.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.