What is bundle.js.gz file in angular 2?

Question

I am using ng-cli for my application. when i run ng build --prod, i got two files main.budle.js & main.bundle.js.gz. what is the second one & what is the benefit of it?

Answer 1

HTTP transfer between server and client almost always uses compression. In most cases this is gzip.

So what matters for transfer times is not the size of your bundle.js but the size of bundle.js.gz as content is practically always sent in its gzip compressed form.

When bundle.js is requested, the server gzips it on the fly and puts it on the wire. So gzip is run on every request, which is inefficient for static content.

Also gzip's performance drops significantly with the level of compression (check out this article). Using the highest compression level possible isn't efficient if at all possible on-the-fly. A properly configured webserver would send bundle.js.gz when a gzipped version of bundle.js is requested, so you could use the highest compression level gzip can provide.

In my opinion, the performance bonus of this is negligible unless your server mainly provides static content that can be compressed ahead-of-time. For a small application, with static content and API being served from the same machine, there should be practically no impact.