Set content-econding: gzip header in gzipped files

[webpack-contrib]

Set content-econding: gzip header in gzipped files

[djbingham]

I think I've hit the same issue as the OP (or very similar).

My goal is to have Nginx serve either a gzipped or uncompressed file for each request, depending on whether the uncompressed size exceeds a threshold. To achieve this, I've setup the Webpack Compression Plugin with a threshold for file size (as per the README example) and configured Nginx to check for a ".gz" extended version of each requested file.

WebPack configuration:

new CompressionPlugin({
	asset: "[path].gz[query]",
	algorithm: "gzip",
	test: /\.js$|\.css$|\.html$/,
	threshold: 10240,
	minRatio: 0.8
})

Nginx configuration:

location / {
	root /srv/app;
	try_files $uri.gz $uri =404;
}

Expected result:
Nginx serves gzipped JS files with Content-Type: application/javascript and Content-Encoding: gzip.

Actual result:
Browser received gzipped files with Content-Type: application/x-gzip and no Content-Encoding value.

I'm new to compressing assets for the web and don't know whether it's possible to set file meta-data that Nginx (or other web servers) will parse into Content-Type and Content-Encoding values, but if it is I think it should be done by this plugin. If not, I'll just have to use a smarter Nginx configuration.

UPDATE @11:25 UTC Friday 2nd June

So, it turns out there is a much simpler solution available with Nginx, using the http_gzip_static_module. According to the docs, that module is not built by default. However, it is included in the official Nginx Docker image.

location / {
	gzip_static on;
	rewrite ^/?$ /index.html break;
	root /srv/app;
}

gzip_static on; seems to result in correct Content-Type and Content-Encoding being passed to the client. It also handles checking for a compressd file (with ".gz" extension appended) and falling back to the uncompressed file, if available.

[enzolutions]

Hi, guys great job BTW.

I have the same question, how I could include gzip files in my HTML or must be normal and I have to include some extra configuration in muy server Apache, Nginx, etc?

[michael-ciniawsky]

Can someone please explain with some code what's the goal here, normally content-encoding etc. is configured by the webserver

[willin]

mark

[michael-ciniawsky]

This is a config issue with the webserver in use and unrelated to this plugin as it simply compresses the assets for further usage. Please consider the docs of your webserver

[rupamkhaitan]

You dont need to define in the location
location / {
gzip_static on;
rewrite ^/?$ /index.html break;
root /srv/app;
}

In the main /etc/nginx/nginx.conf

just enable inside

http{

#enable compression of data
gzip on;
gzip_types text/css text/plain application/xml application/javascript application/json application/octet-stream image/gif image/png image/jpeg image/jpg;
gzip_proxied no-cache no-store private expired auth;
#The default is 20 bytes (here adjusted to 1000 if needed)
#gzip_min_length 1000;
gunzip on;
}

And see it will compress the files and send