Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Serve bundle.js.gz file on IIS

I am using Angular 2 latest CLI to bundle and build application.

As a result of that the CLI produces "main.bundle.js.gz" file which I want to host on IIS server.

I am not sure how to configure IIS to serve zipped content.

When I manually change "index.html" file to point to ".gz" files it does not work. Has anyone tried that on IIS and could provide some clue how to configure it to get it to work.

I know that IIS has build in compression support, but I do not want to use that. I want to serve already zipped file by Angular CLI.

Any help will be appriciated.

like image 820
ptomaszi Avatar asked Nov 30 '16 09:11

ptomaszi


1 Answers

Sharing configuration I came up to serve pre-compressed static content in IIS.

After building your ng2 project you have dist dir with *.gz files and others. Create "gz" dir and move *.gz files into it.

Make changes to Web.config. Add "location" element for gz dir. Here we disable built-in IIS compression, so IIS won't compress our pre-compressed files second time(double compression). Add header "content-encoding: gzip" for browser to understand that we are serving gzipped contents.

<location path="gz">
    <system.webServer>
        <urlCompression doStaticCompression="false" doDynamicCompression="false" dynamicCompressionBeforeCache="false" />
        <httpProtocol>
            <customHeaders>
                <add name="content-encoding" value="gzip" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</location>

Next is our custom *.js.gz file extension. We must define its content-type as application/javascript. Add to global system.webServer > staticContent:

<mimeMap fileExtension=".js.gz" mimeType="application/javascript" />

Final step. Edit index.html and change main script path to "gz/main.xxx.bundle.js.gz"

Complete Web.config example https://gist.github.com/suhrab/552af7b3383706081fbe51c102c290d7

END.

Advice. Because angular-cli for production produces files with unique names(hash), for me it is "main.0b55c0ac894d24f40217.bundle.js.gz", you can add cache control headers to never expire. https://www.iis.net/configreference/system.webserver/staticcontent/clientcache

like image 113
Didar_Uranov Avatar answered Nov 03 '22 00:11

Didar_Uranov