Minification (programming): Difference between revisions

Content deleted Content added
No edit summary
 
(18 intermediate revisions by 8 users not shown)
Line 3:
{{Redirect|Terser|the basic topic|terseness}}
{{Use dmy dates|date=September 2021}}
'''Minification''' (also '''minimisation''' or '''minimization''') is the process of removing all unnecessary characters from the [[source code]] of [[Interpreted language|interpreted programming languages]] or [[markup language]]s without changing its functionality. These unnecessary characters usually include [[Whitespacewhitespace (computer science)|white space characterscharacter]]s, [[Newline|new line characters]], [[source code comment|comments]], and sometimes [[Curly bracket programming language|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 and a part of the [[Demoscene#64K_intro|demoscene]].
 
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.
Line 24:
 
==History==
In 2001 [[Douglas Crockford]] introduced '''JSMin''',<ref>{{Cite web |title=JSMin: The JavaScript Minifier |url=https://www.crockford.com/javascript/jsmin.html |website=Crockford.com |date=11 September 2001 |first=Douglas |last=Crockford |publisher=[[WP:SPS|Self-published]]|archive-url=https://web.archive.org/web/20020405140416/https://www.crockford.com/javascript/jsmin.html |archive-date=5 April 2002 }}</ref> which removed comments and whitespace from JavaScript code.<ref name=":1">{{Cite web |url = https://webplatform.github.io/docs/concepts/programming/javascript/minification/ |title = Code minification |website = webplatform.github.io |publisher=The WebPlatform Project |url-status = live |archive-url = https://web.archive.org/web/20160424125048/https://docs.webplatform.org/wiki/concepts/programming/javascript/minification |archive-date = 24 April 2016}}</ref> It was followed by '''YUI Compressor''' in 2007.<ref name=":1"/> 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.<ref>{{Cite web |url=https://arstechnica.com/information-technology/2009/11/google-opens-up-its-javascript-development-toolbox-to-all/ |title=Google opens up its JavaScript development toolbox to all |website=[[Ars Technica]] |first=Ryan |last=Paul |date=6 November 2009}}</ref> In 2010, Mihai Bazon introduced '''UglifyJS'''<!--Q116250477-->, which was superseded by UglifyJS2 in 2012; the rewrite was to allow for source map support.<ref>{{Cite web |url=http://lisperator.net/blog/should-you-switch-to-uglifyjs2/ |title=Should you switch to UglifyJS2? |last=Bazon |first=Mihai |website=lisperator.net |date=8 November 2012 |publisher=[[WP:SPS|Self-published]]}}</ref> From 2017, Alex Lam took over maintenance and development of UglifyJS2, replacing it with UglifyJS3 which unified the CLI with the API.<ref>{{Cite web |url=https://www.npmjs.com/package/uglify-js/v/3.0.0 |title=uglify-js NPM |website=npmjs.com |date=6 May 2017 }}</ref> In 2018, '''Terser'''<!--Q95961419--> has been forked from uglify-es<ref>{{Cite web |title=terser · JavaScript mangler and compressor toolkit for ES6+ |url=https://terser.org/ |access-date=2023-01-29 |website=terser.org}}</ref><ref>https://github.com//terser/commit/3ef6879ecafd12b57e575ec85e6104e71d5a1b6f {{bare URL inline|date=April 2023}}{{dead link|date=January 2024}}</ref> and has gained momentum since; in 2020 it outstripped UglifyJS when measured in daily downloads.<ref>{{cite web | url=https://npmtrends.com/terser-vs-uglify-js | title=Terser vs uglify-js |website= NPM trends |url-status=live |archive-url=https://archive.today/20240127214344/https://npmtrends.com/terser-vs-uglify-js |archive-date= 27 JanJanuary 2024}}</ref>
 
==Source mapping==
A '''Sourcesource Mapmap''' 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.<ref name=":0">{{Cite web|date=2011-01-11|title=Source Map Revision 3 Proposal|url=https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit|url-status=dead|archive-url=https://sourcemapsweb.infoarchive.org/web/20160308081352/https://specdocs.htmlgoogle.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit|archive-date=2014-11-268 March 2016|access-date=2016-04-16}}</ref> Version 2 and 3 of the format reduced the size of the map files considerably.<ref name=":0" />
 
==Types==
Line 41:
Components and libraries for [[Web application]]s 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 SheetSheets]] (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.<ref>{{Cite web |last=Seddon |first=Ryan |date=March 21, 2012 |title=Introduction to JavaScript Source Maps |url=http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ |url-status=dead |archive-url=https://web.archive.org/web/20211228111603/http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ |archive-date=Dec 28, 2021 |website=HTML5 Rocks}}</ref>
 
==References==