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?

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?

• javascript
• angularjs
• angular
• typescript
• webpack

2 Answers 2

HTTP transfer between server and client almost always uses pression. 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 pressed 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 pression (check out this article). Using the highest pression 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 pression level gzip can provide.

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

Gzipped folders are meant for server. Your server must have such configuration for that. Write it in your server conf files so that they could send gzipped folders.