.gz file names not updated in index.html

[webpack-contrib]

.gz file names not updated in index.html

[nerdmax]

Just in case some one else find this issue later.

If you are using html-webpack-plugin along side compression-webpack-plugin and you want the html-webpack-plugin to reference the .gz file automatically.

You can try this plugin: html-webpack-change-assets-extension-plugin.

Eg:

plugins: [
  new HtmlWebpackPlugin({
    jsExtension: ".gz"
  }),
  new CompressionPlugin(), // compression plugin will generate the xxx.js.gz file
  new HtmlWebpackChangeAssetsExtensionPlugin()
];

[o-alexandrov]

@akashbiz
You need to set an appropriate header, metadata, for the objects that are gzip compressed, either using the CLI or manually adjusting each object in the web console. Example using CLI:
$ aws s3 sync . s3://bucketName --content-encoding gzip --metadata-directive REPLACE

Btw, you don't need to have both .gz and non-gzipped objects at the same time. AWS S3 uncompresses the objects by itself before responding to the request, if the client's browser doesn't support GZIP. It's also explained in the AWS S3 docs.

[michael-ciniawsky]

If you use html-webpack-plugin, it's a bug/known issue (#71), otherwise compression-webpack-plugin doesn't alter anything by itself here and you need to do it manually

[akashbiz]

Yes, I have gone through that issue, but even after changing in index.html manually, in browser its loading entire content within gz file.
My main.bundle.js was 1.1 MB initially without use of compression plugin, after using compression it became 286KB and saved on my local. When I deploy this build on aws s3, it shows 1.1MB transferred for this gzip file in browser dev tools. Also, its not showing the content-encoding as gzip.

Any idea what am I doing wrong?

[akashbiz]

Also, If I update .gz extension manually to bundle files still in browser its not showing content-encoding: gzip, Content-Length is also not visible. So is there any other setting required to add these content-encoding as gzip so that browser can download only 286KB and unzip them in browser?

[michael-ciniawsky]

This needs to be configured in your 'webserver' config separately (send with the correct content-encoding header). No idea how to enable it for AWS sry :)

[michael-ciniawsky]

@OlzhasAlexandrov Thx 👍

[rcklmk]

@o-alexandrov
Hi, I'm glad that I found your comment, it helped me solve the problem of serving gzipped static assets directly from S3 (especially webpack chunks).

AWS S3 uncompresses the objects by itself before responding to the request, if the client's browser doesn't support GZIP.

With regards to on-the-fly gzip decompression, I was wondering if you could provide any reference to the page that documents this behavior or some way to test it - I tried googling, but the ones I found were talking about CloudFront's automatic compression feature instead. Thanks