Javsacript Decompression by

Javsacript Decompression

Last update: 3 years ago Tag : javascript, compression, D3, SVG, JSON

Well many of you surely have already heard a lot about minify, or compressing assets (js,css) into a one file. Now, I have a big data file, more than 1MB, I consider it pretty big in the browser arena. The data is in JSON or SVG format, so minify doesn't reduce the size significantly. Otherwise, a simple ZIP or BZIP2 can reduce the size very well, let's say from 1.9MB into 160KB and 77KB respectively, a huge reduction!

Now the question is how to utilize the zip/bzip2 in the browser, using javascript only, without the need of swf or java applet, or server side (node and the gang)?

First, I use JSZip to deal with zipped data. Go to the website and there are many examples there. I successfully use this library on at least Firefox and Chrome (all latest version).

Second, I use this library to handle bzipped data, and running well on Firefox, Chrome and Safari (again, all latest version, ymmv).

In my case, I use generated SVG (using D3.js), complete with embedded data and its interactivity, so it's around 1.9-2.1MB in size, and take quite some times to load in a browser. The SVG itself is generated from a huge MySQL database and needs more time to just fetch and convert it to JSON. So, using these libraries, the libs and the data much more smaller than the original/generated one.

Another case, but I forgot either the link or author, is implemented javascript deflation on js/css file, so it uses a compressed folder with many js and css in it, and inject both the assets to the document on the fly.

Share this post: