javascript - Angular2 GZIP issue when I run my app

Question

I have an angular2 typescript app.

I host with Firebase and use cloudflare for speed, caching and protection.

The browser header says: accept-encoding:gzip, deflate, sdch, br

This gets converted to a app.js file and is minified now to 1.6mb.

I then GZIP Compressed this app.js file.

I'm wanting to use the app.js file that is now GZIP compressed rather than the original 1.6mb app.js file. Therefore, I point to the app.js.gz file in my index.html page and I get a browser error called:

app.js.gz:1 Uncaught SyntaxError: Invalid or unexpected token

Below is a screen grabs of my app.js file and index.html.

Let me know if you request any more info or screen grabs.

It seems like I need to do something else in order for it to work. Do I need to do some cloudflare settings to accept a .gz file or something?

Answer 1

Those gzips are meat for webservers that can use pregzipped files that they dont have to gzip it with every request or cache it. The js it then transfered compressed and the browser/cloudflare handles the rest. So you dont have to edit the script tags to use gzip or dont use it.

But you can simply use nginx and enable gzip there (and dont use the .gz) for the few request from cloudflare.