TypeScript/JavaScript minification

问题

I have a web application written in TypeScript and at some point, all the output of the compiled .ts files will be minified.

Now, at some point in my code I do something like this:

class Test {
    testProperty: any;
    constructor() {
        this.getMethods();
    }
    private getMethods(){
        for (var method in this) {
            if (method.endsWith("Method")) {
                alert(method);
            }
        }
    }

    doSomethingMethod(){}
}

var x = new Test();

While I haven't done any test myself, but from what I've read (this blog post, the first comment of this SO answer ) that when minifying, all names of functions, properties and so on are altered.

Will the minification of the output of the .ts files alter this way of getting the method names? Does it depend on the type of minification?

EDIT: I introduced the output of the .ts file above in a minifier (jscompress.com) and the result is the following:

var Test=function(){function t(){this.getMethods()}return t.prototype.getMethods=function(){for(var t in this)t.endsWith("Method")&&alert(t)},t.prototype.doSomethingMethod=function(){},t}(),x=new Test;

As you can see, this minified version doesn't affect the variable names and the code kept its intended functionality.

What I want to know is : Are there minifying tools that alter the naming of your objects?

回答1:

As already stated in other answers - most JavaScript minifiers won't change names of the publicly available symbols as it may break external code.

However, some minifiers offer more aggressive compression modes that may actually rename symbols that are potentially visible to the outer scope unless you protect them using special comments or some other technics. For example take a look at the Google Closure compiler in advanced compilation mode - https://developers.google.com/closure/compiler/docs/api-tutorial3

回答2:

A minifier doesn't change publicly available names, it only changes names that are isoldated inside a scope so that they can't be reached from outside code. The code is supposed to be functionally equivalent after minifying.

As you see in your example the minifyer hasn't changed global variables like for example Test, but it has changed the local variable method into t.

回答3:

Minifiers usually won't change variable names that can be accessed outside the current closure. This could cause problems, for example, if you define your Test class in one file and outside it you try to call it using the same name Test.

So, for example, the minified version of the following code:

function myFunction() {
  var myVariable = 'hello world';
  alert(myVariable);
}

myFunction();

Will be minified to:

function myFunction(){var n="hello world";alert(n)}myFunction();

The variable myVariable was renamed to n because it can't be accessed outside the function, but myFunction continues with its name to ensure it can be accessed anywhere.

If you know this function won't be called in other places, you could place it inside a closure like this:

(function() {
  function myFunction() {
    var myVariable = 'hello world';
    alert(myVariable);
  }

  myFunction();
})()

// myFunction won't be accessible here

Then your code would be minified to:

!function(){function l(){var l="hello world";alert(l)}l()}();

来源：https://stackoverflow.com/questions/32524728/typescript-javascript-minification

标签

javascript

typescript

minify