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.

TypeScript is a free and open-source high-level programming language developed by Microsoft that adds static typing with optional type annotations to JavaScript. It is designed for the development of large applications and transpiles to JavaScript. Because TypeScript is a superset of JavaScript, all JavaScript programs are syntactically valid TypeScript, but they can fail to type-check for safety reasons.

<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.

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.

<span class="mw-page-title-main">GraalVM</span> Virtual machine software

GraalVM is a Java Development Kit (JDK) written in Java. The open-source distribution of GraalVM is based on OpenJDK, and the enterprise distribution is based on Oracle JDK. As well as just-in-time (JIT) compilation, GraalVM can compile a Java application ahead of time. This allows for faster initialization, greater runtime performance, and decreased resource consumption, but the resulting executable can only run on the platform it was compiled for.

<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.

NativeScript provides platform APIs directly to the JavaScript runtime for a rich TypeScript development experience. As an open-source framework to develop apps for iOS, visionOS and Android platforms combining a best of all worlds approach marrying familiar Web approaches like CSS and view templating with common platform languages it delivers a liberating toolset for developers. It was originally conceived and developed by Bulgarian company Telerik, later acquired by Progress Software. At the end of 2019 responsibility for the NativeScript project was taken over by long-time Progress partner, nStudio. In December 2020, nStudio also oversaw the induction of NativeScript into OpenJS Foundation as an Incubating Project. NativeScript apps are built using JavaScript, or by using any programming language that transpiles to JavaScript, such as TypeScript. NativeScript supports the Angular and Vue JavaScript frameworks. Mobile applications built with NativeScript result in fully native apps, which use the same APIs as if they were developed in Xcode or Android Studio. Additionally, software developers can re-purpose third-party libraries from CocoaPods, Maven, and npm.js in their mobile applications without the need for wrappers.

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.

<span class="mw-page-title-main">Deno (software)</span> Secure JavaScript and TypeScript runtime

Deno is a runtime for JavaScript, TypeScript, and WebAssembly that is based on the V8 JavaScript engine and the Rust programming language. Deno was co-created by Ryan Dahl, who also created Node.js.

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.