Search code examples
angulariiswebpackhttp-compression

How to configure gzip compression in webpack of angular project?

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 [email protected] 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

Solution

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