CODEWITHSUNDEEP
angulariiswebpackhttp-compression
Uthpala Pathirana
Uthpala Pathirana

Reputation: 146

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

Upvotes: 2

Views: 5479

Answers (2)

Uthpala Pathirana
Uthpala Pathirana

Reputation: 146

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.

Upvotes: 3

JohnnyDevNull
JohnnyDevNull

Reputation: 982

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

Upvotes: 1

Related Questions