How does minification work and does it affect angular nested objects?

Question

How does minification handle $scope.obj.subObj = { key: val ...};

from what I understand the last to use variable stays unchanged,

but if I were to have html element

<div>{{obj.subObj.key}}</div>

would the result of minify shorten the code to a.b.c.key? forgive me for asking in amateur fashion, but I'm trying to understand how javascript minification works.

Answer 1

From: http://en.wikipedia.org/wiki/Minification_(programming)

Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code, without changing its functionality.

So, if the minifier is able to detect that it can safely rewrite $scope.obj.subObj to a.b.c it will.

As a rule of thumb though, any variable that is from the global scope, like document, window or jQuery will not be minified because other code (outside of the scope of this file) might depend on it.

The next step up from minifying is using a compressor like Google Closure Compiler or Yahoo's YUI Compressor. These programs are typically more powerful minifiers. They can replace a function call by an in-line function for instance or change a certain method by a shorter or faster method. This requires a lot of knowledge about JavaScript and performance optimizations.

You can crank up the compression rate by dropping certain compatibility requirements but I've found the resulting code to be very unstable so I don't think we're quite there yet :)