Hacker News new | ask | show | jobs
by nilliams 3356 days ago
Example from the docs [1], Closure compiler can combine 'aggressive renaming', 'dead code removal' and 'function inlining', so it can compile:

    function unusedFunction(note) {
      alert(note['text']);
    }
    function displayNoteTitle(note) {
      alert(note['title']);
    }
    var flowerNote = {};
    flowerNote['title'] = "Flowers";
    displayNoteTitle(flowerNote);
to:

    var a={};a.title="Flowers";alert(a.title);
For comparison, rollup created:

    function displayNoteTitle(note) {
      alert(note['title']);
    }
    var flowerNote = {};
    flowerNote['title'] = "Flowers";
    displayNoteTitle(flowerNote);
... (which you'd then have to minify, but as you can see it only eliminated the unused function).

[1] https://developers.google.com/closure/compiler/docs/api-tuto...

3 comments

I just tried that example code in closure compiler, I actually got

    alert("Flowers");
Can't get any better than that.
Good example, original uses ES6 classes:

https://github.com/psychonautwiki/mw-UserBadge/blob/master/u...

After applying Google Closure Compiler in advanced mode:

https://github.com/psychonautwiki/mw-UserBadge/blob/master/u...

(There isn't even a prototype chain like it babel)

Beautified version of compiled version:

https://gist.github.com/anonymous/1b6b96ec319f1272f9bbc3f19b...

I think that gives the whole thing a very new kind of aesthetics

Intuitively I would assume that for most codebases dead-code removal would have the biggest impact, especially when importing third-party libraries and only using portions of them.

But from your comment I can see that rollup should be able to handle this too. Yet the data in the linked article seems to imply Google Closure compiler still can optimize the code 33% further.

I find it hard to imagine that inlining functions can make that kind of difference.

Is it the test which contains flawed data? Or is this just an area where it's hard to generalize results due to the varying characteristics of different code-bases? Anyone got an opinion?

I compared the output bundles (ran them back through a beautifier for sanity) and it looks like a lot of the benefit comes from the aggressive renaming.

Compare this section of the rollup output:

    return e || (e = new zh({
        enableLongStackTrace: dt()
    })), e.run(function() {
        var r = yh.resolveAndCreate([{
                provide: zh,
                useValue: e
            }], n.injector),
            o = t.create(r),
            l = o.injector.get(th, null);
        if (!l) throw new Error("No ErrorHandler. Is platform module (BrowserModule) included?");
        return o.onDestroy(function() {
            return _t(n._modules, o)
        }), e.onError.subscribe({
            next: function(t) {
                l.handleError(t)
            }
        }), bt(l, function() {
            return o.injector.get(bh).donePromise.then(function() {
                return n._moduleDoBootstrap(o), o
            })
        })
    })
To this from Closure compiler:

    var c;
    c || (c = new Af({
        Lm: yh()
    }));
    return c.run(function() {
        var d = Ne([{
                sb: Af,
                Be: c
            }], a.s),
            e = b.create(d),
            f = e.s.get(ee, null);
        if (!f) throw Error("No ErrorHandler. Is platform module (BrowserModule) included?");
        e.ec(function() {
            return Hh(a.mi, e)
        });
        c.hq.subscribe({
            next: function(a) {
                f.handleError(a)
            }
        });
        return Ch(f, function() {
            return e.s.get(Ze).xp.then(function() {
                Eh(a, e);
                return e
            })
        })
    })
On top of that I did a basic comparison of the number of times the 'function' keyword is present in each bundle:

    $ ag --count function eg-closure.js
    eg-closure.js:2905

    $ ag --count function eg-rollup.js
    eg-rollup.js:4421
Whether this is from inlining or 'better' dead-code removal I can't really tell.
...a lot of the benefit comes from the aggressive renaming.

ISTM if we're going to compress the file anyway, renaming would have a much smaller effect on what actually gets served?