When using the YUI compressor, should I combine then minify, or minify then combine?

2024/2/27 9:10:33

I've read some people saying there can be issues if you combine and then minify, and that you should always minify then combine (See for example the comments on this question.) However, I've never seen an example of what these issues are or encountered them myself. I also can't find anything official from the YUI devs stating what the best practice is.

Answer

Due to the way compression algorithms work, combining and then minifying should give us the best results.

GZIP compression

Currently the most popular compressing algorithm is GZIP. How it works is that it tries to reference the position of a character (or a chain of characters) from their last occurrence, and define how many of these characters can be repeated.

Let's assume the string you'd want to compress is: AABAB

It would be broken by the algorithm down into:

[0,0]A  - Last occurrence of A was 0 characters ago, and its length was 0
[1,1]A  - Last occurrence of A was 1 characters ago, and its length was 1 char
[0,0]B  - Last occurrence of B was 0 characters ago, and its length was 0
[2,2]AB - Here comes the interesting part. We will only reference the set ofcharacters, not occurrence of each character. The last occurrence of ABwas 2 characters ago, and the length of this set of characters is 2. 

Minification

Knowing that, we can see that it matters a lot to the algorithm if we're re-using the same characters as, for example, function argument names - and that's precisely what minification does (see: closure compiler). If given these two functions:

function hello(name, surname) {alert('Welcome '+ name + ' ' + surname);
}function logout( id ) {alert('Logged out '+ id);
}

The output version would come as:

function hello(a,b){alert("Welcome "+a+" "+b)}
function logout(a){alert("Logged out "+a)};

Which would allow the algorithm to be more efficient. Now this is a very simplified example, however in bigger chunks of code, where the variables or even function names can be replaced by their minified versions, the order of doing things will start to matter.

Some more sources:

Google developers video about compression methods

Dissecting the GZIP format

http://en.ppmy.cn/q/41090.html

Related Q&A

Traverse 2D Array (Matrix) Diagonally

So I found this thread that was extremely helpful in traversing an array diagonally. Im stuck though on mirroring it. For example:var m = 3; var n = 4; var a = new Array(); var b = 0;for(var i = 0; i &…

Is there a way to overlay a canvas over a fullscreen HTML5 video?

Im using videojs to play video, and Ive done some manipulation on the video content frame by frame and display it in a <canvas> (ID: display).When the video is playing, <canvas> can display…

How to integrate Stripe Connect with Node.js?

So im at the part where you sign in your Stripe account and it redirects you to my website once done. I dont know what to do next and the documentation is difficult to comprehend because i dont have an…

Is there a difference in using a constructor to create an object versus returning an object?

Is there any difference in how these functions operate? The first one is more typically of what I think about when thinking of a constructor.Example 1: using this to name and set properties. Then usi…

rotate svg marker with multiple paths using google maps javascript

When I use the below simple SVG it works well with the rotation method var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.…

Javascript click event firing twice, even with stopPropagation

I have a set of items like this:<label for="Cadenza-1" class="cars"><input type="checkbox" value="1" alt="Cadenza" id="Cadenza-1" na…

particles.js not covering entire page

Im trying to use particles.js as background, but I am not able to set the canvas as a full-size background.I tried at least 10 different solution from similar issues but nothing worked. The canvas alwa…

Node Js mysql(and mysql2) ECONNRESET

i am currently trying to connect to a MySQL server on the internet using Node.Js with the mysql or the mysql2 NPM dependencies to use queries and other related stuff.the code is simple...//i import my …

Chrome content script does not load in about:blank page

I am developing a Chrome extension which will load content script according to the following manifest:"content_scripts" : [{"matches" : [ "<all_urls>" ],"js&quo…

How to read a text file saved on my computer using javascript

I have a text file that is being updated regularly and I want to know if it is possible to read the file, line by line, with javascript and save the values in variables and then update the html page wi…