Hacker News new | ask | show | jobs
by josteink 3355 days ago
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?

1 comments

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?