javascript – How can I estimate the size of my gzipped script?-ThrowExceptions

Exception or error:

How can I estimate the size of my JavaScript file after it is gzipped? Are there online tools for this? Or is it similar to using winzip for example?

How to solve:

http://closure-compiler.appspot.com/home lets you paste in code, and it will give you compression ratios for a particular file before and after GZIP.

Original Size:    90 bytes (100 bytes gzipped)
Compiled Size:    55 bytes (68 bytes gzipped)
Saved 38.89% off the original size (32.00% off the gzipped size)

You can use the pretty-print and white-space only options to estimate the compression of non-minified content.

If you need an estimate:

  • Start with 100 JS files that have gone through the same minification pipeline.
  • For each file, compute the ratio in sizes between gzip -c "$f" | wc -c and wc -c "$f"
  • The average of those ratios is an approximation of the compression you should expect for a similar JS file.

Cygwin contains command line implementations of gzip and wc for Windows.

###

If you’re on unix – gzip -c filename.min.js | wc -c will give you a byte count of the gzipped file

###

7-zip supports compressing to the GZIP format.

I often use this to approximate and compare file sizes.

When creating an archive, look for Archive Format, and gzip is the 3rd option.

Update:

In the comments, we discussed that there might be a difference between 7-zip’s GZIP compression, versus an actual server’s GZIP compression. So, I compared using just the homepage of http://www.google.com/.
Google’s GZIP’d payload was 36,678 bytes. 7-zip, with “gzip Normal” setting, was 35,559 (3% smaller). With “gzip Fastest” setting, it was 37,673 (3% larger).

So, long story short: 7-zip had results that were about 97% accurate.

###

Directly from the terminal,

gzip -9 -c path/to/file.js | wc -c | numfmt --to=iec-i --suffix=B --padding=10

If you need the original size for comprison,

cat path/to/file.js | wc -c | numfmt --to=iec-i --suffix=B --padding=10

To get it programatically there are utilities like gzip-size. It’s a node package but you can install it globally as a general tool.

###

http://refresh-sf.com/ will give you minification and gzip ratios & sizes.

###

If you want to compare uncompressed, gzipped, and brotli’ed file sizes for the whole folder: (assuming you want to filter *.js):

for file in *.js; do printf "$file\t$(cat $file | wc -c)\t$(gzip -kc7 $file | wc -c)\t$(brotli --in $file --out temp.br --force --quality 11 && cat temp.br | wc -c)\n"; done | tee filesizes.log

Sample output (tab-separated so you can copy to a spreadsheet):

foo.js 39035   10150   8982
bar.js 217000  68978   56337

###

With node core, you can use the length of the zlib.gzip buffer to determine the gzip size:

const fs = require('fs');
const util = require('util');
const zlib = require('zlib');
const readFile = util.promisify(fs.readFile);
const gzip = util.promisify(zlib.gzip);

const getGzipSize = filePath => readFile(filePath)
  .then(gzip)
  .then(x => x.length);

###

You can install gzip itself on Windows via Gow (Gnu On Windows).

Leave a Reply

Your email address will not be published. Required fields are marked *