2

Gzip compression doesn't work in a angular 5 project which uses webpack 3.10.0 after hosting in iis. The plugins I have tried are compression-webpack-plugin@1.0.0 and brotli-gzip-webpack-plugin.

Shown below is a sample code and the plugins are included in production configs.

const BrotliGzipPlugin = require('brotli-gzip-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    plugins: [
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.(js|html)$/,
            threshold: 10240,
            minRatio: 0.8
        }),
        new BrotliGzipPlugin({
            asset: '[path].br[query]',
            algorithm: 'brotli',
            test: /\.(js|css|html|svg)$/,
            threshold: 10240,
            minRatio: 0.8
        }),
        new BrotliGzipPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.(js|css|html|svg)$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ]
}

It was expected to load a smaller size of the files and include something similar to content-encoding: gzip in response headers.

enter image description here

  1. Why aren't the files replaced with gz version in prod mode?
  2. Could there be any IIS configuration for this to work?

This is how my build looks, it has gzip, brotli files as well.

enter image description here

Uthpala Pathirana
  • 146
  • 3
  • 18

2 Answers2

3

It is needed to use the CompressedStaticFiles middleware when serving compressed files over ASP.Net core.

Place app.UseCompressedStaticFiles(); instead of app.UseStaticFiles(); in Startup.Configure().

This will ensure that you application will serve pre-compressed gzipped and brotli compressed files if the browser supports it.

Refer brotli-gzip-webpack-plugin for details.

Uthpala Pathirana
  • 146
  • 3
  • 18
1

GZIP compression is normally a task of your webserver like Apache, Nginx or in your case the IIS.

Take a look at this post: https://stackoverflow.com/a/27496937/3634274

JohnnyDevNull
  • 951
  • 1
  • 8
  • 20
  • I have tried what's mentioned in that answer and the one follwed. It's still taking the normal files in the build not the gzipped ones. Can't exactly say it's a task of the server because in webpack, they create compressed files during a prod mode build which in my case aren't the ones referred. – Uthpala Pathirana Jul 24 '19 at 13:19
  • when you enable gzip from server you only see the result in the network tab of your browser, e.g. like the chrome dev tools network tab, there you can see heavy reduced files when everything setup fine. You save your files as they are from default build to the specific site folder in your iis – JohnnyDevNull Jul 24 '19 at 14:09
  • 1
    Appreciate your explanations. I've added an image of my build to the question body. Why would it contain the compressed files if the compression is carried out by the web server? – Uthpala Pathirana Jul 24 '19 at 14:58