June 21st, 2019

Written in C++ using Visual Studio 2017 (Windows). Download from here.

Lazy readers like me can elect to watch a dull YouTube video about it here if they wish.

Now, I'm not fussed about web development if I'm honest - it's generally a bit of a drag. All that fussing about with unpredictable CSS to get a silly web page to display properly when I'd rather be writing some proper code that did something a bit useful. But there you go, it's a drudge but sometimes you have to put on your web jockey hat.

I'm no doubt completely out of touch with modern wev dev tools. Somewhat disenchanted these days and rather ambivalent about relying on too many third party tools. I prefer more vanilla-flavored programming and like to code at a more native level. Basically stick with the good old HTML/Javascript/CSS/PHP combo rather than go with flavor-of-the-month frameworks. (I might add that so many websites these days seem very slow and unwieldly and provide a very unpleasant surfing experience - too many ads, too clunky, irritating popups and other crap getting in the way of what you are trying to actually read - but that discussion is for another day.)

Anyhoo, so I spent a few days messing about with my own minifier, and this is what I came up with. Once I managed to get it to do what I wanted, I didn't bother developing it any further. It is what it is.

JSquash is a Windows console application and you run it like this:

JSquash.exe fred.js fred_min.js [options]
where [options] can be:

Substitute symbols with short, obtuse, sort of random ones.
Remove comments.
Remove comments and (unncessary) whitespace.
To verify symbol substitutions.
If you don't enter an option the output file is just a copy of the input file.

The total compression option is:

JSquash.exe fred.js fred_min.js -s -rcw
The verify (-v) option does a dummy substitution, whereby it simply prefixes all symbols it expects to substitute with "A$" so you can see exactly where the substitutions are occurring. It's intended as a debugging feature.

Of course, all it does is try to identify symbols that it can substitute, and by symbol I mean 'words' that consist of letters, numbers, underscore or dollar sign. Nothing that is exclusively numerics, obviously. Nothing in quoted strings, and it  ignores comments.

As well as the output JS file, it reads and writes to three other text files:

(1) A symbol file that contains all the symbols it thinks can be substituted. It automatically gets named [xxx]_js_symbols.txt where [xxx] is the name of your input JS file, so it's unique for that JS file. You will note in the symbol file that after each symbol, in brackets, is shown the rather cryptic short new symbol that JSquash generated as a replacement. This is useful for tracing the original symbol name when you are inspecting the minified JS file.
(2) A reserved word file (js_reserved.txt) which contains JS keywords like 'var', 'if', 'else'; and anything in the way of DOM function stuff like 'innerHTML'. You get the idea. Unfortunately, I can't supply you with that, 'cos I don't have one. The program doesn't initially expect one, but rather outputs the slimmest list - I really couldn't be bothered to try and identify that many. But read on, it might make sense. BTW it automatically marks single letters - both uppercase and lowercase and single underscore and single dollar sign - as 'reserved' since there's no point in substituting a single-letter symbol with something else. At least, I can't think of a reason, whereas replacing a single-letter symbol with a symbol that has MORE than one character might occur which would be undesirable. Arguably even two-letter symbols (a good two thousand of them) are small enough to consider that there's no point changing them, but I decided against that.
(3) A file of symbols to ignore ([xxx]_js_ignore.txt). This is similar to js_reserved.txt, but applies only to your specific Javascript file: You may have various functions, for example, that would wreck the code if they were renamed. Such symbols go in here.
Note that the first time you run JSquash NONE of these files exists, but that's okay because they start from scratch and their content accumulates with successive runs.

So it's an iterative process: What you do is run JSquash a number of times to find out what symbols can be substituted. You repeat enough times to tease out keywords and your own symbols that must remain fixed. For the fred.js example, after each run, you inspect fred_js_symbols.txt and look for symbols that should not be changed. When you see a system or Javascript keyword and the like, you stick an asterisk in front of it, eg.

If you identify one of your own symbols that must remain unchanged, prefix it with a plus sign, eg.

After labelling all such symbols, save the files and re-run JSquash; apply the -s option so substitutions occur and any wrongly-changed symbols will break the code. DON'T remove comments and whitespace at this stage, because it's then easier to compare your input and output files to see where errors are being injected. As long as the output code keeps failing you know you need to identify more symbols that must remain fixed (other errors aside such as failing to put semi-colons where they supposed to be - like at the end of all function definitions).

In practice my cumulative js_reserved.txt symbol list is hardly comprehensive, simply because it's only grown on the back of a single web dev project so contains only a few keywords. But down the line you will take this js_reserved.txt with you on all your future web dev journeys and inevitably it will become your personal War And Peace of Javascript-related terminology.

My implementation of the algorithms to achieve Javascript compression and obfuscation may well be flawed since it was just a coding exercise to see what I could achieve. Neither is it terribly optimised; I just hacked away until I got it to do what I wanted. Finally, it's probably got a whole bunch of bugs and shortcomings. Yet, like I said, it works well enough for me.

If you're still interested enough to use or investigate it, feel free to download and mess about it. If you find a use for it I'd be interested in your observations.
© 2019 - 2024 Kendallization