23

Is there are way to serve gzip static cotent when using self host environment to publish an ASP.NET Core website?

4

4 Answers 4

17

[Edit 2016-11-13]

There is another way to serve gzipped files that replaces steps 2 and 3. It's basically quite the same idea, but there is a nuget package that does it all for you readily available. It basically checks if the is .gz or .br file that matches the requested one. If it exists it returns it with the appropriate headers. It does verify that the request has a header for the corresponding algorithm. Github code if you want to compile it yourself is here.

There is also an issue to support that in the official repository, so I really hope Microsoft will have the standard plugin to do that, since it's rather common and logical to use that nowadays.


I think I have found the most optimized way of serving the compressed content. The main idea is to pre-compress the files and since the default ASP.NET 5 way is to use gulp to build js, it is as easy to do as this:

1. Add a gulp step to gzip the bundled libraries:

gulp.task("buildApplication:js", function () {
    return gulp.src(...)
        ...
        .pipe(gzip()) 
        ...
});

This will produce something like libraries.js.gz in your bundles folder

2. Refernce the libraries.js.gz instead of libraries.js in the cshtml file

3. Amend the static file handler to fix the returned headers

We need to add Content-Encoding and change the Content-Type from default application/x-gzip to application/javascript because not all browsers are smart enough to read js properly from x-gzip

app.UseStaticFiles(new StaticFileOptions
    {
        OnPrepareResponse = context =>
        {  
            if (headers.ContentType.MediaType == "application/x-gzip")
            {
                if (context.File.Name.EndsWith("js.gz"))
                {
                    headers.ContentType = new MediaTypeHeaderValue("application/javascript");
                }
                else if (context.File.Name.EndsWith("css.gz"))
                {
                    headers.ContentType = new MediaTypeHeaderValue("text/css");
                }

                context.Context.Response.Headers.Add("Content-Encoding", "gzip");
            }
        }
    });

Now all there is no CPU cycles to waste to gzip the same content all the time and it's the best possible performance in serving the files. To improve it even further all of js has to be bunlded and minified before gzipping. Another upgrade is to set CacheControl max age in the same OnPrepareResponse to cache for one year and add asp-append-version="true" in the cshtml.

P.S. If you will host behind IIS you might need to turn off the static compression of js and css not to double compress, I am not sure how it will behave in this situation.

7
  • 1
    Where does headers come from? Commented Sep 13, 2016 at 12:56
  • 1
    If I remember correctly it's context.Context.Response.Headers, so this code is definitely missing something :) Commented Sep 13, 2016 at 19:37
  • I edited your answer based on the answer from @zeddr below, his code works copy-and-paste for .Net Core 1.0 (RTM). Please approve.
    – TetraDev
    Commented Sep 28, 2016 at 21:51
  • I don't see any edits, but it's a good idea to update the code with RTM, it was some beta when I wrote it :) Commented Sep 30, 2016 at 8:41
  • I have not tried, but it might be possible to use FileExtensionContentTypeProvider to simplify the mappings as well. Though we still would have to set content-encoding "gzip". provider.Mappings[".js.gz"] = "application/javascript"; provider.Mappings[".css.gz"] = "text/css"; Commented Sep 30, 2016 at 9:44
9

This is a fixed version of method 3 from Ilyas answer that works with ASP.NET Core 1 RTM, and it serves pre-zipped javascript files:

app.UseStaticFiles(new StaticFileOptions
        {
            OnPrepareResponse = context =>
            {
                IHeaderDictionary headers = context.Context.Response.Headers;
                string contentType = headers["Content-Type"];
                if (contentType == "application/x-gzip")
                {
                    if (context.File.Name.EndsWith("js.gz"))
                    {
                        contentType = "application/javascript";
                    }
                    else if (context.File.Name.EndsWith("css.gz"))
                    {
                        contentType = "text/css";
                    }
                    headers.Add("Content-Encoding", "gzip");
                    headers["Content-Type"] = contentType;
                }
            }
        });
1
  • 1
    Awesome dude, works flawlessly. For some reason I had to reload my page and restart the kestrel serve many times before it finally picked the changes up, but it works serving gzip!
    – TetraDev
    Commented Sep 28, 2016 at 21:49
6

@Ilya's Answer is very good but here are two alternatives if you are not using Gulp.

ASP.NET Core Response Compression Middleware

In the ASP.NET Core BasicMiddlware repository, you can find (at time of writing) a pull request (PR) for Response Compression Middleware. You can download the code and add it to you IApplicationBuilder like so (at time of writing):

public void Configure(IApplicationBuilder app)
{
    app.UseResponseCompression(
        new ResponseCompressionOptions()
        {
            MimeTypes = new string[] { "text/plain" }
        });

    // ...Omitted
}

IIS (Internet Information Server)

IIS (Internet Information Server) has a native static file module that is independent of the ASP.NET static file middleware components that you’ve learned about in this article. As the ASP.NET modules are run before the IIS native module, they take precedence over the IIS native module. As of ASP.NET Beta 7, the IIS host has changed so that requests that are not handled by ASP.NET will return empty 404 responses instead of allowing the IIS native modules to run. To opt into running the IIS native modules, add the following call to the end of Startup.Configure.

public void Configure(IApplicationBuilder app)
{
    // ...Omitted

    // Enable the IIS native module to run after the ASP.NET middleware components.
    // This call should be placed at the end of your Startup.Configure method so that
    // it doesn't interfere with other middleware functionality.
    app.RunIISPipeline();
}

Then in your Web.config use the following settings to turn on GZIP compression (Note that I included some extra lines to compress things like .json files which are otherwise left uncompressed by IIS):

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <!-- httpCompression - GZip compress static file content. Overrides the server default which only compresses static 
                           files over 2700 bytes. See http://zoompf.com/blog/2012/02/lose-the-wait-http-compression and
                           http://www.iis.net/configreference/system.webserver/httpcompression -->
    <!-- minFileSizeForComp - The minimum file size to compress. -->
    <httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files" minFileSizeForComp="1024">
      <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
      <dynamicTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="message/*" enabled="true" />
        <add mimeType="application/x-javascript" enabled="true" />

        <!-- Compress XML files -->
        <add mimeType="application/xml" enabled="true" />
        <!-- Compress JavaScript files -->
        <add mimeType="application/javascript" enabled="true" />
        <!-- Compress JSON files -->
        <add mimeType="application/json" enabled="true" />
        <!-- Compress SVG files -->
        <add mimeType="image/svg+xml" enabled="true" />
        <!-- Compress RSS feeds -->
        <add mimeType="application/rss+xml" enabled="true" />
        <!-- Compress Atom feeds -->
        <add mimeType="application/atom+xml" enabled="true" />

        <add mimeType="*/*" enabled="false" />
      </dynamicTypes>
      <staticTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="message/*" enabled="true" />
        <add mimeType="application/x-javascript" enabled="true" />
        <add mimeType="application/atom+xml" enabled="true" />
        <add mimeType="application/xaml+xml" enabled="true" />

        <!-- Compress ICO icon files (Note that most .ico files are uncompressed but there are some that can contain 
             PNG compressed images. If you are doing this, remove this line). -->
        <add mimeType="image/x-icon" enabled="true" />
        <!-- Compress XML files -->
        <add mimeType="application/xml" enabled="true" />
        <add mimeType="application/xml; charset=UTF-8" enabled="true" />
        <!-- Compress JavaScript files -->
        <add mimeType="application/javascript" enabled="true" />
        <!-- Compress JSON files -->
        <add mimeType="application/json" enabled="true" />
        <!-- Compress SVG files -->
        <add mimeType="image/svg+xml" enabled="true" />
        <!-- Compress EOT font files -->
        <add mimeType="application/vnd.ms-fontobject" enabled="true" />
        <!-- Compress TTF font files - application/font-ttf will probably be the new correct MIME type. IIS still uses application/x-font-ttf. -->
        <!--<add mimeType="application/font-ttf" enabled="true" />-->
        <add mimeType="application/x-font-ttf" enabled="true" />
        <!-- Compress OTF font files - application/font-opentype will probably be the new correct MIME type. IIS still uses font/otf. -->
        <!--<add mimeType="application/font-opentype" enabled="true" />-->
        <add mimeType="font/otf" enabled="true" />
        <!-- Compress RSS feeds -->
        <add mimeType="application/rss+xml" enabled="true" />
        <add mimeType="application/rss+xml; charset=UTF-8" enabled="true" />

        <add mimeType="*/*" enabled="false" />
      </staticTypes>
    </httpCompression>
    <!-- Enable gzip and deflate HTTP compression. See http://www.iis.net/configreference/system.webserver/urlcompression
         doDynamicCompression - enables or disables dynamic content compression at the site, application, or folder level.
         doStaticCompression - enables or disables static content compression at the site, application, or folder level. 
         dynamicCompressionBeforeCache - specifies whether IIS will dynamically compress content that has not been cached. 
                                         When the dynamicCompressionBeforeCache attribute is true, IIS dynamically compresses 
                                         the response the first time a request is made and queues the content for compression. 
                                         Subsequent requests are served dynamically until the compressed response has been 
                                         added to the cache directory. Once the compressed response is added to the cache 
                                         directory, the cached response is sent to clients for subsequent requests. When 
                                         dynamicCompressionBeforeCache is false, IIS returns the uncompressed response until 
                                         the compressed response has been added to the cache directory. 
                                         Note: This is set to false in Debug mode to enable Browser Link to work when debugging.
                                         The value is set to true in Release mode (See web.Release.config).-->
    <urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="false" />
  </system.webServer>
</configuration>
1

You could implement an action filter that compresses the contents of the response if the client supports it.

Here is an example from MVC5. You should be able to modify that to work with MVC 6:

http://www.erwinvandervalk.net/2015/02/enabling-gzip-compression-in-webapi-and.html

Your Answer

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

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