Re: [Wikitech-l] ResourceLoader, now in trunk!

Tim Starling wrote:

On 07/09/10 17:44, Roan Kattouw wrote:

...

2010/9/7 Dmitriy Sintsov questpc@rambler.ru:

...

Do browsers support streamed and combined (archive-like) gz-encoded content? Then probably minifying will not be neccessary.

Minification makes a shocking difference: remember that it's not just whitespace being stripped, it's comments as well. For example, in /trunk/extensions/UsabilityInitiative/js we have:

plugins.combined.js: 259281 bytes plugins.combined.min.js: 142565 bytes plugins.combined.js.gz: 65569 bytes plugins.combined.min.js.gz: 32740 bytes

So not only is the minified JS roughly half the size in both the compressed and the uncompressed cases, it actually /compresses better/ (3.95x vs. 4.35x).

Note that the advantage of minification is somewhat inflated due to the nature of the source. There seems to be a "because we can" element to it: because the developers are so impressed by the concept of minification, they write excessively verbose and excessively many comments. For example:

// create the span wrapper for the matched text var spannode = document.createElement( 'span' ); spannode.className = 'highlight'; // shave off the characters preceding the matched text var middlebit = node.splitText( pos ); // shave off any unmatched text off the end middlebit.splitText( pat.length ); // clone for appending to our span var middleclone = middlebit.cloneNode( true ); // append the matched text node to the span spannode.appendChild( middleclone ); // replace the matched node, with our span-wrapped clone of the matched node middlebit.parentNode.replaceChild( spannode, middlebit );

Or a doc comment:

/**

• This plugin provides a generic way to add suggestions to a text box.
• Usage:
• Set options:

• $('#textbox').suggestions( { option1: value1, option2: value2 } );
  

• $('#textbox').suggestions( option, value );
  

• Get option:

• value = $('#textbox').suggestions( option );
  

• Initialize:

• $('#textbox').suggestions();
  

• Options:
• fetch(query): Callback that should fetch suggestions and set the

suggestions property. Executed in the context of the

• textbox
  

• Type: Function
  

• cancel: Callback function to call when any pending asynchronous

suggestions fetches should be canceled.

• Executed in the context of the textbox
  

• Type: Function
  

• special: Set of callbacks for rendering and selecting

• Type: Object of Functions 'render' and 'select'
  

• result: Set of callbacks for rendering and selecting

• Type: Object of Functions 'render' and 'select'
  

• $region: jQuery selection of element to place the suggestions below

and match width of

• Type: jQuery Object, Default: $(this)
  

• suggestions: Suggestions to display

• Type: Array of strings
  

• maxRows: Maximum number of suggestions to display at one time

• Type: Number, Range: 1 - 100, Default: 7
  

• delay: Number of ms to wait for the user to stop typing

• Type: Number, Range: 0 - 1200, Default: 120
  

• submitOnClick: Whether to submit the form containing the textbox

when a suggestion is clicked

• Type: Boolean, Default: false
  

• maxExpandFactor: Maximum suggestions box width relative to the

textbox width. If set to e.g. 2, the suggestions box

• will never be grown beyond 2 times the width of the textbox.
  

• Type: Number, Range: 1 - infinity, Default: 3
  

• positionFromLeft: Whether to position the suggestion box with the

left attribute or the right

• Type: Boolean, Default: true
  

• highlightInput: Whether to hightlight matched portions of the input

or not

• Type: Boolean, Default: false
  

*/

I think it's ironic that this style arises in JavaScript, given that it's a high-level language and relatively easy to understand, and that you could make a technical case in favour of terseness. C has an equally effective minification technique known as compilation, and its practitioners tend to be terse to a fault. For instance, many Linux kernel modules have no comments at all, except for the license header.

-- Tim Starling

This brings up a question, what's the comparison between unminified, minified, just stripping comments, and their gzipped versions? Does minified+gzipped provide any significant size savings over simple commentstripped+gzipped?

If not, then there's something to say about that since only erasing comments would still make debugging somewhat doable since you should be able to get a good enough line number to use find with some nearby code to track down where the bug is. (You also won't run into server-side js syntax-error issues due to needing to minify actual code)

~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name]