PDA

View Full Version : removing dead code



gabrielle
24 Aug 2011, 11:28 AM
Hi,

although at the beginning I've been tearing my hair out trying to have the building process work (lack of helpful error messages when things are wrong!!!), now I generally manage to build my applications fairly well. And then the SDK is really good. However, I have one big remark. I have noticed that all-classes.js contains a huge amount of dead code (unused). And I have the impression that building app-all.js does not remove such dead code. Is it correct?

It would be very nice to be able to get rid of dead code. I believe this would spare much more spaces than what "var me = this" will ever save (http://www.sencha.com/forum/showthread.php?132045)!

Google closure can remove dead code but it minifies at the same time (as far as I can see; I am not a user of Google closure). I have searched the Internet for a tool highlithing dead code, but couldn't find anything I liked.

So my question to all is: "do you know such tool for removing dead code? How do you normally do? Maybe you just live with it?..."
And my suggestion to Sencha team would be to integrate a dead code removal feature into the builder.

Any views/opinions welcome...

dj
3 Sep 2011, 4:53 AM
What exactly do you mean by dead code removal?

There are two different concepts sailing under this banner:

(1)


Ext.define('Test', {
test: function(){
var t = 'hello';
if (true) return t;
// the following two lines are dead code
t = 'good bye';
return t;
}
});
alert(Ext.create('Test').test());


(2)


Ext.define('Test', {
test1: function(){
return 'test1';
},
test2: function() { // this function does not get called, so it is dead code
return 'test2';
}
});
alert(Ext.create('Test').test1());


I'm fairly sure that YUI Compressor can remove dead code of concept (1) (where the control flow inside of functions is examined and code branches that never get reached can be removed.)

AFAIK dead code removeal of concept (2) (removing functions that never get called) is only possible with Google's Closure Compile in advance mode (or when you are programming in Google's GWT / Ext GWT). ExtJS is not compatible with this mode of Google's Closure Compiler. (The compiler does not know that Ext.create('Test') returns a 'Test' class or even that Ext.define('Test'...) defines the 'Test' class)


So: I use YUI Compressor – or nowadays UglifyJS (https://github.com/mishoo/UglifyJS) – to compress my application code. No dead code removeal of concept (2) here.

gabrielle
3 Sep 2011, 11:13 AM
Thank you dj,
that was exactly the type of feedback I was looking for (and what you are saying is what I was expecting I have to say).
I was thinking of something to help remove dead code of type #2, but with only little hope, so no disappointment! :D
It seems to me that built applications are far from being optimised (in terms of size). I have already slashed maybe 50% of some of my all-classes.js and everthing still works fine.
Best regards

dj
4 Sep 2011, 9:00 AM
Wow, 50% – I wouldn't have thought that.

A tool for automatic removal of dead code of type #2 would definitely be cool. But it is kinda hard to do and cannot be universal (like the compression of YUI Compressor or UglifyJS). So I live with the normal compression and GZIP transfer encoding.

gabrielle
6 Sep 2011, 11:46 PM
Actually, even worse than dead code of type #2 is the fact that some classes are included in all-classes.js, which are not needed at all. I might have been a bit exagerating about the figure of 50%, but maybe not that much. Let's take the first app I did: out of all-classes.js, I have removed 40 classes, and kept 155 classes (including my own). So that makes more than 20% reduction in terms of number of classes (and some of them are really big). And still, it is not fully optimised because I did it by hand and I have better things to do than spend my time on this. So I am sure there remains unused classes out there.

How did I come to such findings? First I realised that all-classes.js included classes which I though were really not needed. For instance, the vml class was clearly not required by my app, yet it was there! At first, I thought there might have been some errors in the dependencies built by the SDK. But when checking the details, it appeared that, yes indeed, the vml class was required by the dependency tree. But it was required because some dead code of type #2 was making use of it, but my app would never do. So I could safely remove the whole class.

SunboX
20 Sep 2011, 5:15 AM
How about Google´s Closure Compiler? What I have read, it rewrites your whole code and removes unnecessary funtion calls, vars aso.

http://code.google.com/intl/de-DE/closure/compiler/

greetings Sunny

dj
22 Sep 2011, 10:27 AM
Hi SunboX,

read post #2, Google's Closure Compiler (in advance mode, when it removes dead code) is not compatible with ExtJS's class system.