93

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?

9 Answers 9

133

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

3
  • 5
    @Christophe : gzip is available on Windows through Cygwin or UnxUtils. Feb 27, 2012 at 16:44
  • 4
    Thanks, this is also useful to know raw unzipped byte size by doing gunzip -c myfile | wc -c or zcat myfile | wc -c Oct 28, 2013 at 13:58
  • 2
    To get the un-gzipped size of an un-gzipped file: cat filename.js | wc -c. Mar 12, 2019 at 1:39
56

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.

1
  • thx! I'll try Cygwin, but for now the closure compiler gave me the answer I needed.
    – Christophe
    Feb 28, 2012 at 6:30
16

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.

9

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.

7
  • 1
    Sorry, 7-zip can make *smaller archives than most CLI GZIP packers. Great if you want the smallest, bad if you want a precise byte count for what most web servers will make on the fly (which I assume is the intended scenario?
    – tomByrer
    Jan 4, 2014 at 15:13
  • @tomByrer Thanks for the info ... can you back it up with any documentation? 7-zip has a lot of options for gzip, maybe some of them could be configured to match CLI GZIP. Jan 6, 2014 at 5:27
  • This is the best test I can Goggle right now. I made a small gzip comparison with gzip vs 7zip vs zopfli a week ago; I'll have to add more tests & formatting which will add time. In the mean while, why don't you provide such tests to prove your point please? :)
    – tomByrer
    Jan 6, 2014 at 18:48
  • @tomByrer Oh, I think you're confused. Maybe I need to re-word my answer. 7-Zip (the application) supports multiple compression formats, including GZIP. I'm not talking about 7z (the compression format), which is undoubtedly better than gzip. Jan 7, 2014 at 18:02
  • 1
    Alright, I updated my answer with a quick test. I tested google.com, and found that 7-zip was 3% smaller. For most people, this ought to be acceptable. Feb 13, 2015 at 23:48
7

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

0
4

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);
1
  • Thanks, this is what I was seeking, to use it with the github script action. Also there are the sync api available: const gzipSizeInKb = Math.round((zlib.gzipSync(content).length / 1024) * 100) / 100; Apr 20 at 21:22
2

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
1
  • 1
    Removed usage of unnecessary temp file, and saving of output to filesizes.log. Added commas to output to improve readability. Bumped gzip compression level to 9 to match the already maxed-out brotli compression level of 11. for file in *.js; do printf "$file\t$(cat $file | wc -c | xargs printf "%'d\n")\t$(gzip -9c $file | wc -c | xargs printf "%'d\n")\t$(brotli -cZ $file | wc -c | xargs printf "%'d\n")\n"; done | tee
    – mrienstra
    Jul 9, 2019 at 1:29
0

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

0

If you're working in VSCode, then I can recommend this extension: https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.