Over the holidays I’ve been working on a small project playing with some of the new Javascript libraries that came out over the past year. After a while I noticed that the size of the Javascript I was sending to the client was growing and starting to approach 100 KB for a basic isomorphic website. I figured now was a good time to look into minification and compression.

The site starts out by loading in the following raw code:

Riot.js 64KB
Page.js 14KB
client code 14KB
Total 92KB

After Browserify was done rolling all of the code up into a single file it was ~92KB which was getting a little large for a website which basically did nothing. First step was to add minification to the Makefile using UglifyJs2.

$(CLIENT_MIN_ROLLUP): $(CLIENT_ROLLUP)
	$(UGLIFYJS) --screw-ie8 $^ -o $@

This step brought it down from 92KB to 44KB shaving off over 50% of the original size. This is still quite a lot of code for such a simple site so the next step is to add gzip compression for everything being sent. I am using expressjs 4.0 as the webserver so to add gzip it’s as easy as:

import compression from 'compression';
app.use(compression());

After adding gzip the data sent over the wire went down to an impressive 14KB. That’s only 15% of the original size, a savings of 78KB for a total of about 2 minutes worth of work. This really shows that no matter the size of your website the cost/bennefit of implementing even basic minification and compression is well worth it. If you have any questions or comments leave them in the comments below or mention me on twitter @fromanegg. Thanks for reading!