Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to gzip static content in ASP.NET Core in a self host environment

Tags:

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

like image 655
eadam Avatar asked Mar 19 '15 23:03

eadam


People also ask

Does ASP NET core support response compression?

When you're unable to use the compression features of web servers (IIS, Apache, Nginx), ASP.NET Core provides an alternate option, Response Compression middleware. It's performance won't match server based compression features though.

What is gzip deflate?

gzip is based on the DEFLATE algorithm, which is a combination of LZ77 and Huffman coding. DEFLATE was intended as a replacement for LZW and other patent-encumbered data compression algorithms which, at the time, limited the usability of compress and other popular archivers.

What is gzip content?

Gzip is a file format and software application used on Unix and Unix-like systems to compress HTTP content before it's served to a client.


4 Answers

[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.

like image 74
Ilya Chernomordik Avatar answered Nov 11 '22 05:11

Ilya Chernomordik


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;                 }             }         }); 
like image 24
BobbyTables Avatar answered Nov 11 '22 06:11

BobbyTables


@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>
like image 23
Muhammad Rehan Saeed Avatar answered Nov 11 '22 06:11

Muhammad Rehan Saeed


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

like image 42
David Paquette Avatar answered Nov 11 '22 05:11

David Paquette